我很难理解为什么jQuery函数“on change”只能为每一行工作一次。我所使用的代码完美适用于每行的多次更改,但是当我更改“相反值”时代码失败。
我认为这是因为已经设置了第一个选择器$( ".line" ).children()
,然后每个选择器都没有“取消设置”。我也查看过类似问题的先前答案,但没有取得任何成功。
有没有办法改变这个?我尝试使用.unbind()
进行取消设置,但这只会阻止代码在第一次执行后执行。
$(".line").children().on("change", function(event) {
console.log($(this).children());
if ($(this).children().attr("class").includes("picker")) {
$(this).parent().find(".hex").attr("value", $(this).find(".picker").val());
} else {
$(this).parent().find(".picker").attr("value", $(this).find(".hex").val());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="col-md-12 form">
<h3>Palette name : <span id="palette_name"></span></h3>
<div class="line">
<div class="form-group col-md-5">
<input type="color" class="form-control picker" value="#ffffff" id="picker1">
</div>
<div class="form-group col-md-4">
<input type="text" class="form-control hex" value="#ffffff" id="hex1">
</div>
</div>
<div class="line">
<div class="form-group col-md-5">
<input type="color" class="form-control picker" value="#ffffff" id="picker2">
</div>
<div class="form-group col-md-4">
<input type="text" class="form-control hex" value="#ffffff" id="hex2">
</div>
</div>
<div class="line">
<div class="form-group col-md-5">
<input type="color" class="form-control picker" value="#ffffff" id="picker3">
</div>
<div class="form-group col-md-4">
<input type="text" class="form-control hex" value="#ffffff" id="hex3">
</div>
</div>
<div class="line">
<div class="form-group col-md-5">
<input type="color" class="form-control picker" value="#ffffff" id="picker4">
</div>
<div class="form-group col-md-4">
<input type="text" class="form-control hex" value="#ffffff" id="hex4">
</div>
</div>
</div>
<div class="col-md-10">
<a class="btn btn-info btn-lg">Update</a>
<a class="btn btn-danger btn-lg pull-right cancel" href="index.html">Cancel</a>
</div>
</form>
答案 0 :(得分:1)
此代码适用于小提琴:https://jsfiddle.net/uq80uort/
$( ".line" ).children().on("change",function(event){
console.log($(this).children());
if ($(this).children().attr("class").includes("picker")) {
$(this).parent().find(".hex").attr("value",$(this).find(".picker").val());
} else {
$(this).parent().find(".picker").attr("value",$(this).find(".hex").val());
}
});
答案 1 :(得分:0)
我设法使用
更改了事件访问器 $(".line input").on("change", func...);
而不是你的代码,而if else选择器阻止,现在似乎工作。
请看下面的代码段
$(".line input").on("change", function(event) {
if ($(this).hasClass("picker")) {
$(this).parents(".line").find(".hex").val( $(this).val());
} else {
$(this).parents(".line").find(".picker").val($(this).val());
}
});
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="col-md-12 form">
<h3>Palette name : <span id="palette_name"></span></h3>
<div class="line">
<div class="form-group col-md-5">
<input type="color" class="form-control picker" value="#ffffff" id="picker1">
</div>
<div class="form-group col-md-4">
<input type="text" class="form-control hex" value="#ffffff" id="hex1">
</div>
</div>
<div class="line">
<div class="form-group col-md-5">
<input type="color" class="form-control picker" value="#ffffff" id="picker2">
</div>
<div class="form-group col-md-4">
<input type="text" class="form-control hex" value="#ffffff" id="hex2">
</div>
</div>
<div class="line">
<div class="form-group col-md-5">
<input type="color" class="form-control picker" value="#ffffff" id="picker3">
</div>
<div class="form-group col-md-4">
<input type="text" class="form-control hex" value="#ffffff" id="hex3">
</div>
</div>
<div class="line">
<div class="form-group col-md-5">
<input type="color" class="form-control picker" value="#ffffff" id="picker4">
</div>
<div class="form-group col-md-4">
<input type="text" class="form-control hex" value="#ffffff" id="hex4">
</div>
</div>
</div>
<div class="col-md-10">
<a class="btn btn-info btn-lg">Update</a>
<a class="btn btn-danger btn-lg pull-right cancel" href="index.html">Cancel</a>
</div>
</form>
Javascript
&#13;