Fatal编程技术网
  • jquery/
  • jQuery可以'；t更改div内所有跨度的等级

jQuery可以'；t更改div内所有跨度的等级

jquery html

jQuery可以'；t更改div内所有跨度的等级,jquery,html,Jquery,Html,在下面的示例中，如何更改特定h2中所有的类，同时保持单击的类不变 <!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 { dis

在下面的示例中，如何更改特定
h2
中所有
的类，同时保持单击的类不变

<!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>
更改所有跨度类，并添加
$（this）.removeClass（“class_name”）
最简单的方法是：


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



您可以使用闭包变量存储单击的元素，并在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;
    });
});



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


$(".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'); 
});


有两个不同的选项可访问
。我不知道哪个选项会表现更好

在这里，将
.css（）
方法替换为
.addClass（）
，
removeClass（）
或
toggleClass（）


我需要通过数据id选择
。那一页可能还有很多。请参阅我的问题：
$（'.h2[data id=“9”]”）。etcI需要通过其
数据id选择
。那一页可能还有很多。请参阅我的问题：
$（'.h2[data id=“9”]'）。
等etc@Norman你测试过这个解决方案吗。。。我现在修复了一个bug，我正在尝试解决这个问题，但是你能理解为什么在
success:function
之后使用它不能像我在代码中所做的那样工作吗？它无法在跨域问题的复杂bcoz中测试这个问题。我觉得，问题在于“成功”方法中的“this”关键字。将“this”值存储在局部变量中，并在“success”中访问该变量。检查这里（这个代码在这里不起作用，你可以在我们的实际代码中尝试）

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



$(".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'); 
});