2

要素が1つの値Aから値Bにクリックされたときに要素のクラスを変更し、次に2回クリックされたときに値Bから値Aに戻そうとしています。ここで、1回だけ変更できるコードを見つけましたが、2回目は変更できませんでした。（ここでオリジナルを参照してください）。

元のコードは次のとおりです。

<script type="text/javascript">
  function changeClass() {
    document.getElementById("MyElement").className += " MyClass";
    document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/g, '')
  }
</script>

そしてここに私のコードがあります：

<script type="text/javascript">
  function changeClass() {
    if (document.getElementByID("arrow").className == "arrowdown") {
      document.getElementById("arrow").className.replace(/(?:^|\s)arrowdown(?!\S)/g, 'arrowup')
    }
    elseif(document.getElementByID("arrow").className == "arrowup") {
      document.getElementById("arrow").className.replace(/(?:^|\s)arrowup(?!\S)/g, 'arrowdown')
    }
  }
</script>
4

5 に答える 5

3 
$('#arrow').toggleClass('arrowup arrowdown');
于 2012-09-21T00:21:54.540 に答える
0

代わりに、idセレクターと一緒にjQueryのtoggleClassを使用してみませんか？

   $('#arrow').toggleClass('arrowup');
   $('#arrow').toggleClass('arrowdown');

そして、デバッグと数行のコードを節約してください！

于 2012-09-21T00:24:19.960 に答える
0

このフィドルを確認してください

JQueryを使用するとはるかに簡単です。

$(function() {
    var i = 0;
    $('div').on('click', function() {
       i++;
        if( i % 2 == 0){
            $(this).addClass('arrowup').removeClass('arrowdown');
        }
        else{
            $(this).addClass('arrowdown').removeClass('arrowup');
        }
    });
});​
于 2012-09-21T00:25:08.460 に答える
0

jquery addClass（）とremoveClass（）を使用するか、クリックイベント内でtoggleClassを使用するだけです。

<div id="elemID" class="class1">
</div>


function changeClass()
{
    $("#elemID").toggleClass("class1");
    $("#elemID").toggleClass("class2");  
}

REFの

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/

http://api.jquery.com/toggleClass/

乾杯

于 2012-09-21T00:31:09.273 に答える
0

今日、私はこれに似た何かに直面しました。各機能の私のコードでは、ユーザーは親指を上または下に押すことで意見を表明します。選択した親指アイコンの色が明るいため、ユーザーが親指を上に向けたアイコンをクリックすると、親指を上に向けたアイコンが緑色に変わり、親指を下に向けたアイコン（緑色の場合）が黒に変わります。

私はjQueryを使用してそれを解決しました：

$(document).ready(function () {
            $('#vote-yes-@(Model.ProductReviewId)').click(function () {
                setProductReviewHelpfulness@(Model.ProductReviewId)('true');

                $('#1vote-yes-@(Model.ProductReviewId)').toggleClass('green');
                $('#1vote-no-@(Model.ProductReviewId)').removeClass('green').addClass('black');

            });
            $('#vote-no-@(Model.ProductReviewId)').click(function () {
                setProductReviewHelpfulness@(Model.ProductReviewId)('false');

                $('#1vote-no-@(Model.ProductReviewId)').toggleClass('green');
                $('#1vote-yes-@(Model.ProductReviewId)').removeClass('green').addClass('black');

            });
        });
于 2018-12-12T16:23:47.070 に答える