上下矢印onclick

Question

私は、クリックに基づいて上下の矢印の切り替えが必要なボタン用にHTMLとCSSを作成しました。私はHTMLとCSSでうまくいきましたが、jQueryを使ってうまくいきません。誰も私にこれを始めることができますか？ クリックすると.js-custom-sleeve-optionの矢印が上下に変わります。

.js-custom-sleeve-option { 
 
    width: auto; 
 
    min-width: 3.8rem; 
 
    height: 3rem; 
 
    display: inline-block; 
 
    border: 1px solid #d1cac5; 
 
    background: #f7f7f7; 
 
    margin-right: 0.5rem; 
 
    margin-bottom: 0.5rem; 
 
    text-align: center; 
 
} 
 

 
.js-arrow-down { 
 
    display: inline-block; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 4px solid transparent; 
 
    border-right: 4px solid transparent; 
 
    border-top: 6px solid #233354; 
 
    position: relative; 
 
    left: 7px; 
 
} 
 

 
.js-arrow-up { 
 
    display: inline-block; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 4px solid transparent; 
 
    border-right: 4px solid transparent; 
 
    border-bottom: 6px solid #233354; 
 
    position: relative; 
 
    left: 6px; 
 
    bottom: 12px; 
 
}

<div> 
 
\t \t \t <a class="js-custom-sleeve-option"> 
 
\t \t \t \t <span class="js-arrow-down"></span> 
 
\t \t \t </a> 
 
</div>

Answer 1

それを変更する必要がofcourseの..あなたは、jQueryの機能のtoggleClass()

$('.js-custom-sleeve-option').click(function(){ 
 
$(this).children('span').toggleClass('js-arrow-down js-arrow-up') 
 
})

.js-custom-sleeve-option { 
 
    width: auto; 
 
    min-width: 3.8rem; 
 
    height: 3rem; 
 
    display: inline-block; 
 
    border: 1px solid #d1cac5; 
 
    background: #f7f7f7; 
 
    margin-right: 0.5rem; 
 
    margin-bottom: 0.5rem; 
 
    text-align: center; 
 
} 
 

 
.js-arrow-down { 
 
    display: inline-block; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 4px solid transparent; 
 
    border-right: 4px solid transparent; 
 
    border-top: 6px solid #233354; 
 
    position: relative; 
 
    left: 7px; 
 
} 
 

 
.js-arrow-up { 
 
    display: inline-block; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 4px solid transparent; 
 
    border-right: 4px solid transparent; 
 
    border-bottom: 6px solid #233354; 
 
    position: relative; 
 
    left: 6px; 
 
    bottom: 12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
\t \t \t <a class="js-custom-sleeve-option"> 
 
\t \t \t \t <span class="js-arrow-down"></span> 
 
\t \t \t </a> 
 
</div>

で行うことができ、このようなものになります

Answer 2

これはあなたのニーズに応じて

$(function(){ 
$(".js-custom-sleeve-option").on('click' , function(){ 
    this.find('span').removeClass('js-arrow-down').end().addClass('js-arrow-up'); 
}); 
});