gpt4 book ai didi

javascript - jQuery Loop 不切换属性

转载 作者:行者123 更新时间:2023-12-02 15:12:14 29 4
gpt4 key购买 nike

我有一个 jQuery every 循环来循环遍历元素,但一旦状态更改它就不会更新。

<span class="btn btn-icon btn-rounded btn-info social_selector" data-network="twitter" data-account-id="1" data-active='1'>
<i class="fa fa-twitter"></i>
</span>
<span class="btn btn-icon btn-rounded indigo social_selector" data-network="facebook" data-account-id="1" data-active='1'>
<i class="fa fa-facebook"></i>
</span>
<span class="btn btn-icon btn-rounded btn-warning social_selector" data-network="instagram" data-account-id="1" data-active='1'>
<i class="fa fa-instagram"></i>
</span>

jQuery循环如下;

//Social Selector
$(document).on('click','.social_selector',function(){

if($(this).attr('data-active') == 1){
$(this).addClass('btn-disabled');
$(this).attr('data-active', 0);
}else{
$(this).removeClass('btn-disabled');
$(this).attr('data-active', 1);
}

var networks = "";
$(".social_selector").each(function(index, element){
if($(element).data('active') == "1"){
networks += $(element ).data('network')+', ';
}
});
$('#social_network_holder').val(networks);

});

当 jQuery 循环运行时,每次点击时数据事件都会更改,所以我不确定是否是因为 Dom 在循环之间更新?

//Social Selector
$(document).on('click', '.social_selector', function() {

if ($(this).attr('data-active') == 1) {
$(this).addClass('btn-disabled');
$(this).attr('data-active', 0);
} else {
$(this).removeClass('btn-disabled');
$(this).attr('data-active', 1);
}

var networks = "";
$(".social_selector").each(function(index, element) {
if ($(element).data('active') == "1") {
networks += $(element).data('network') + ', ';
}
});
$('#social_network_holder').val(networks);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<span class="btn btn-icon btn-rounded btn-info social_selector" data-network="twitter" data-account-id="1" data-active='1'>
<i class="fa fa-twitter"></i>
</span>
<span class="btn btn-icon btn-rounded indigo social_selector" data-network="facebook" data-account-id="1" data-active='1'>
<i class="fa fa-facebook"></i>
</span>
<span class="btn btn-icon btn-rounded btn-warning social_selector" data-network="instagram" data-account-id="1" data-active='1'>
<i class="fa fa-instagram"></i>
</span>

最佳答案

attr() 方法替换 data() 方法

   $(".social_selector").each(function(index, element){
if($(element).attr('data-active') == "1"){
networks += $(element ).data('network')+', ';
}
});

关于javascript - jQuery Loop 不切换属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34737179/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com