0

ulリストを反復処理するために JQuery を使用.on('click'...)しています。現在クリックされているクラスにクラスを追加しli、以前に選択したクラスからクラスを削除したいと考えています。li

jsFIDDLE はこちら: jsfiddle リンク

HTML:

<div id="divisionMenus">
    <ul>
        <li>Type 01</li>
        <li>Type 02</li>
        <li>Type 03</li>
        <li>Type 04</li>
    </ul>
</div>
<p class="results"></p>

CSS:

#divisionMenus {
    width: 220px;
    min-height: 220px;
    position: absolute;
    top: 30px;
    left: 5px;
    background-color: #003399;
}
#divisionMenus ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#divisionMenus ul li {
    padding: 18px;
    border-top: 3px solid #111;
    font-weight: bold;
    cursor: pointer;
}
#divisionMenus ul li:hover {
    background-color: #c0dde8;
    color: #111;
}
.currentType {
    background-color: #c0dde8;
    color: #111;
}
.results {
    display: none;
}

JQuery:

$(document).ready(function () {

    // select list items in list
    $devisionProductTypes = $('#divisionMenus').children().children();

    $devisionProductTypes.each(function (index) {

        $(this).on('click', $(this), function() {
            $productType = $(this);
            $productTypeTitle = $productType.text();
            $otherProductTypes = $productType.not($(this));

            if (!$productType.hasClass('currentType')) {
                $productType.addClass('currentType');
                $otherProductTypes.removeClass('currentType');

                $('.results').show('fast').text('You have selected ' + $productTypeTitle);
            } else {
                $productType.removeClass('currentType');
                $otherProductTypes.removeClass('currentType');
            }

        });

    });

});

div imgサイズを切り替えるために、同じロジックを使用していくつかを反復し、そこで機能しました。しかし、ここではありません。私は何かを見逃していますか、それとも私はこれに完全に間違っています。

4

5 に答える 5

1

私はあなたがそれを過度に複雑にしていると思います、それは次のように単純に聞こえます:

$('#divisionMenus li').on('click', function() {

  var $this = $(this);
  $this.toggleClass('currentType').siblings().removeClass('currentType');

  if ($this.hasClass('currentType')) {
    $('.results').show('fast').text('You have selected ' + $this.text());
  } else {
    $('.results').hide();
  }

});

ここにフィドルがあります

于 2013-05-15T14:11:49.483 に答える
0 
$("li").click(function() {
//var $thisBtn = $(this);
if($("li").hasClass("btn-color")) {
    $("li").removeClass("btn-color");
    $(this).addClass("btn-color");
}
else {  
    $(this).addClass("btn-color");
}
});

同じことについては、このjsfiddle を参照してください。

于 2013-10-05T15:05:31.477 に答える