0

在下面的示例中，如何更改<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');
            },
4

5 回答 5

0

答案写在您当前的代码上下文中。还有其他选择，就像其他回答一样。

$(".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

于 2013-08-26T11:21:20.913 回答
0

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

于 2013-08-26T10:50:28.917 回答
0

最简单的方法是： 

$('div.h2 span').click(function() {
    $('div.h2 span').not($(this)).removeClass('like');
})
于 2013-08-26T10:51:13.400 回答
0

您可以使用闭包变量存储单击的元素，并在 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;
    });
});
于 2013-08-26T10:52:11.183 回答
0 
$(".like").click(function() {
    $(this).parents(".h2").children("span").each(function(i, ele) {
        $(ele).removeClass("like").addClass("abc");
    });
    $(this).addClass("like")
});
于 2013-08-26T10:55:48.867 回答