0

クリックされたものを除いて、リスト内のすべての要素を変更したいと思います。実際にクリックされたものを特定し、その兄弟を変更する必要があると思いますか? クリックされた要素を見つけるにはどうすればよいですか?

<ul>
    <li><h4 class="span1"><a href="#" class="sort" data-sort="ID">ID<i class="icon-arrow-down" aria-hidden="true"></i></a></h4></li>
    <li><h4 class="span2"><a href="#" class="sort" data-sort="Type">Type<i class="icon-arrow-down" aria-hidden="true"></i></a></h4></li>
    <li><h4 class="span3"><a href="#" class="sort" data-sort="Task">Task<i class="icon-arrow-down" aria-hidden="true"></i></a></h4></li>
    <li><h4 class="span8"><a href="#" class="sort" data-sort="Project">Project<i class="icon-arrow-down" aria-hidden="true"></i></a></h4></li>
    <li><h4 class="span3a"><a href="#" class="sort" data-sort="DueDate">Urgency<i class="icon-arrow-down" aria-hidden="true"></i></a></h4></li>
    <li><h4 class="span3 last"><a href="#" class="sort" data-sort="Created">Date Created<i class="icon-arrow-down" aria-hidden="true"></i></a></h4></li>
</ul>

$('.sort').click(function () {
    $(this).data('clicked', true);

    if($(this).data('clicked')) {
        $('i', this).toggleClass('icon-arrow-down').toggleClass('icon-arrow-up');
    } 
    else {
        $('.sort i').siblings().removeClass('icon-arrow-up').addClass('icon-arrow-down');
    }
});

答え：

$('.sort').click(function() {
    $(this).closest('li').siblings().find('i').removeClass('icon-arrow-up').addClass('icon-arrow-down');
    $(this).find('i').toggleClass('icon-arrow-down icon-arrow-up');
});
4

5 に答える 5

0

これは比較的読みやすく理解しやすいと思います。

$('a.sort').click(function () {
    $("i", this)
        .toggleClass('icon-arrow-down')
        .toggleClass('icon-arrow-up')
        .closest("li")
        .siblings()
        .find("i")
        .removeClass('icon-arrow-up')
        .addClass('icon-arrow-down');
});​
于 2012-11-27T16:28:25.453 に答える
0

$(this)はクリックされたアンカー要素を表すためsiblings()、他の要素にはアクセスできませんli。代わりに、次のように、2 レベル上の要素の兄弟を探します。

$(this).parent().parent().siblings().removeClass("foo");

liまたは、含まれているアンカーではなく をターゲットにするようにマークアップを変更します。

于 2012-11-27T16:06:55.840 に答える
0

あなたはこのようなことをしたい：

$('.sort').click(function (e) {
    $('.sort').not(e.currentTarget).css({
        color: 'red'
    });
    return false
});​

ここにフィドルがあります：http://jsfiddle.net/th3KV/

あなたのコード:

$('.sort').click(function (e) {

    $(this).find('i').toggleClass('icon-arrow-down icon-arrow-up');

    $('.sort').not(e.currentTarget).each(function(){
        $(this).find('i').removeClass('icon-arrow-up').addClass('icon-arrow-down');
    });
    return false
});​
于 2012-11-27T16:00:04.490 に答える
0

これを試して：

$('.sort').click(function() {
    $(".sort i").removeClass('icon-arrow-up').addClass('icon-arrow-down');
    $("i", this).toggleClass('icon-arrow-down icon-arrow-up')
});

フィドルの例

于 2012-11-27T16:03:08.107 に答える
0

上記のサンプルのように、各タグが data-sort 属性によって一意であると仮定します。

$('.sort').click(function () {

$("ul li").each($.proxy(function(index, item) {
if ($("a", item).data("sort") !== $(this).data("sort") {
  //different element than the one clicked
}
}, this));
于 2012-11-27T16:04:12.000 に答える