jQuery循环未切换属性
jQuery Loop not switching attributes
我有一个jQuery每个循环来循环元素,但一旦状态发生变化,它就不会更新。
<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')+', ';
}
});
将您的代码更改为以下使用.data('active')
而不是.attr('data-active')
的代码,或者您可以将它们全部更改为.attr('data-active')
,无论哪种方式,只要确保它们都相同,您就有一个不同的:
$(document).on('click','.social_selector',function(){
var $this=$(this);
if($this.data('active') == 1){
$this.addClass('btn-disabled');
$this.data('active', 0);
}else{
$this.removeClass('btn-disabled');
$this.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/1.9.1/jquery.min.js"></script>
<span class="btn btn-icon btn-rounded btn-info social_selector" data-network="twitter" data-account-id="1" data-active='1'>twitter
<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'>facebook
<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'>instagram
<i class="fa fa-instagram"></i>
</span>
<input class="form-control" required="required" id="social_network_holder" name="social_networks" type="text">
查看我的DEMO。
只要检查一下你是否需要这个
$(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).attr('data-active') == 1){
networks += $(element ).attr('data-network')+', ';
}
});
$('#social_network_holder').val(networks);
alert(networks)
});
相关文章:
- Javascript:循环属性内部的条件递增或递减
- 在循环中包含特定属性
- 借助for循环和数组在对象中添加属性
- 不可枚举的属性出现在 for..在 Chrome 中循环
- 我们可以设置属性'id'到不同的'按钮'通过使用javascript或jquery的循环
- 如何在循环中设置onclick属性
- 按数据属性循环元素并替换值
- 使用循环增加css属性值
- 循环浏览JavaScript对象并记录其属性
- ..的Javascript..循环中的对象没有在最后一个属性上运行
- 循环访问 JS 数组 + 数组属性
- 如何使用 jQuery 在循环中获取属性的值
- 为for循环中的对象添加新属性
- 在'用于'如果javascript中不存在对象属性,则循环
- Waypoint的循环,退出循环后属性未定义
- 如何循环对象中的javascript对象并查找属性
- 使用循环更新 JSON 属性值
- 未捕获的类型错误: 无法读取未定义的属性“循环”
- 使用点符号和括号显示..内部的属性..循环中
- 对象的正确属性循环