Question

在以下示例中，如何更改特定<span> h2内的所有<div>的类，同时保持单击的那个不变？

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Side bar voting thingy</title>
<style type="text/css">
.hide {
    display: none;
}
.no-like {
    color: blue;
}

</style>

<script type="text/javascript" src="http://localhost/site/scripts/jQueryCore.js"></script>
<script type="text/javascript">
$(function() {
    $(".like").click(function() {

        var hasLike = $(this).data("id");
        var data = 'id='+hasLike;
        console.log($(this).data('id'));

        if(hasLike) {
            // ajax call
            $.ajax({
                type:"GET",
                url:"demo.php",
                data:data,
                beforeSend:function(html){
                    // We'll think of something to do here
                },
                success: function(page_data){
                    // Remove class like, add class no-like
                    $('.like[data-id="'+page_data+'"]').removeClass('like').addClass('no-like');
                    //Change the class for all other like links other than the one the user clicked
                    //Hard coded for this example
                    $('.h2[data-id="9"]').siblings('.like').removeClass('like').addClass('hide');
                },
                error: function(yikes){
                    //To do later
                },
            });
        }
        return false;
    });
});
</script>
</head>
<body>

<div id="container">

    <div class="h1" data-id="1">Teachers</div>
        <div class="h2" data-id="2">Who is your favorite Math teacher?
            <div>* Homer Simpson &nbsp  <span class="like" data-id="3" data-sec="2">Like</span></div>
            <div>* Elmer Fudd &nbsp     <span class="like" data-id="4" data-sec="2">Like</span></div>
            <div>* Bugs Bunny &nbsp     <span class="like" data-id="5" data-sec="2">Like</span></div>
            <div>* Obelix &nbsp         <span class="like" data-id="6" data-sec="2">Like</span></div>
            <div>* Mojo Jojo &nbsp      <span class="like" data-id="7" data-sec="2">Like</span></div>
        </div>
        <br>
    <div class="h1" data-id="8">Restaurants</div>
        <div class="h2" data-id="9">Which is your favourtie restaurant in town?
            <div>* McDonalds &nbsp              <span class="like" data-id="10" data-sec="9">Like</span></div>
            <div>* KFC &nbsp                    <span class="like" data-id="11" data-sec="9">Like</span></div>
            <div>* The Heart Attack Grill &nbsp <span class="like" data-id="12" data-sec="9">Like</span></div>
            <div>* In-n-Out &nbsp               <span class="like" data-id="13" data-sec="9">Like</span></div>
            <div>* Popeye's &nbsp               <span class="like" data-id="14" data-sec="9">Like</span></div>
        </div>

</div>

</body>
</html>

我需要在页面中选择特定的h2 <div>。可能还有更多。

success: function(page_data){
                    // Remove class like, add class no-link
                    $('.like[data-id="'+page_data+'"]').removeClass('like').addClass('no-like');
                    //Change the class for all other like links other than the one the user clicked
                    //Hard coded for this example
                    $('.h2[data-id="9"]').siblings('.like').removeClass('like').addClass('hide');
            },

Answer 1

更改所有跨度类，并添加$(this).removeClass("class_name");

Answer 2

最简单的方法是：

$('div.h2 span').click(function() {
    $('div.h2 span').not($(this)).removeClass('like');
})

Answer 3

您可以使用闭包变量存储单击的元素，并在ajax回调中找到它的兄弟。

$(function() {
    $(".like").click(function() {
        var $this = $(this);

        var hasLike = $this.data("id");
        var data = 'id='+hasLike;
        console.log($this.data('id'));

        if(hasLike) {
            // ajax call
            $.ajax({
                type:"GET",
                url:"demo.php",
                data:data,
                beforeSend:function(html){
                    // We'll think of something to do here
                },
                success: function(page_data){
                    // Remove class like, add class no-like
                    $this.closest('.h2').find('.like').not($this).removeClass('like').addClass('no-like');

                },
                error: function(yikes){
                    //To do later
                },
            });
        }
        return false;
    });
});

Answer 4

$(".like").click(function() {
    $(this).parents(".h2").children("span").each(function(i, ele) {
        $(ele).removeClass("like").addClass("abc");
    });
    $(this).addClass("like")
});

Answer 5

在您目前的代码上下文中写的答案。还有其他选择，如其他答案。

$(".like").click(function() {
    //first option
    $(this).parent().siblings().children().css('background-color', 'red');
    //second option
    $(this).closest('.h2').find('span').not(this).css('color', 'yellow'); 
});

访问<span>有两种不同的选项。我不知道哪个选项会表现得更好。

在此处，将.css()方法替换为.addClass()，removeClass()或toggleClass()

jsFiddle

jQuery无法更改div中所有跨度的类

5 个答案: