如何在jQuery中定位$(this)之外的目标

Question

我正在尝试使用$('.selector').on('change', function(){})，然后在其中添加了each。我想要的是针对当前的.selector，如果当前项目已经被选中，那么将其设为空，这样你就可以选择其他项目；DOM中存在多个CCD_ 4元素。请参阅下面的代码。

$(document).ready(function(){

$('.selector').on('change', function(){
var currentSelect = $(this).val();

if(currentSelect == ''){
$('.selector').each(function(){
if(currentSelect == $(this).val()){
alert("Sorry, you cannot select that item again.");
$(this).val('');
}  
});
}
});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<select class="selector">
<option></option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Watermelon">Watermelon</option>
</select>
<br><br>
<select class="selector">
<option></option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Watermelon">Watermelon</option>
</select>
<br><br>
<select class="selector">
<option></option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Watermelon">Watermelon</option>
</select>
<br><br>
<select class="selector">
<option></option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Watermelon">Watermelon</option>
</select>

Answer 1

这里的每个更改事件需要2个循环。

1. 以获取所有选定的值
2. 以隐藏已经从其他CCD_ 5元素中选择的所有值

就这么简单。

$(document).ready(function(){

var selected = []; // Global scope array.

$('.selector').on('change', function(){
var currentSelect = $(this).val();
var selected = [];  // Array reset

$('.selector').each(function(){
var val = $(this).val();
if(val!=""){
selected.push($(this).val()); // Array fill
}
});

console.log(selected);

$('.selector option').each(function(){
if($.inArray($(this).val(),selected)!=-1){ // If not in array: hide
$(this).hide();
}else{
$(this).show();
}
});
});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<select class="selector">
<option></option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Watermelon">Watermelon</option>
</select>
<br><br>
<select class="selector">
<option></option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Watermelon">Watermelon</option>
</select>
<br><br>
<select class="selector">
<option></option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Watermelon">Watermelon</option>
</select>
<br><br>
<select class="selector">
<option></option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Banana">Banana</option>
<option value="Watermelon">Watermelon</option>
</select>

Answer 2

如果我正确理解你的问题，这就是答案。通过使用$(this)，您将对页面上的所有select元素应用任何更改。你只想为点击的那一个做这件事。因此，您应该非常小心使用$(this)，而应该使用$(event.target)。点击此处了解更多差异：$(this(和event.target之间的差异？

$(document).ready(function(){
$('.selector').on('change', function(e){
var currentSelect = $(e.target).val(); // if you need to pass/submit the value somewhere later
$(e.target).attr('disabled', 'disabled');
});
});

为什么不简单地禁用目标元素？您仍然可以看到所选内容，用户无法再次单击。

Answer 3

这个解决方案有点混乱，但它可以

$(document).ready(function(){
$(".selector").on("change", function(){
var currentSelect = $(this).val();
$(this).siblings().on("change", function(event){
if(currentSelect == $(this).val()){
$(this).val('')
alert("Sorry, you cannot select that item again.");
}  
});
});
});

Answer 4

这里没有真正的理由循环使用.each。

您可以做的是.on('change')使用.selector类创建一个包含所有元素值的数组。然后，一旦您有了该数组，请检查刚刚选择的元素有多少实例。如果该数字>1，则该选择已经在不同的.selector元素中进行。

工作笔：https://codepen.io/anon/pen/WLvzMM

$(document).ready(function(){
$('.selector').on('change', function(){
// Put the value of all elements with the class of `.selector` into an array
var all = $.map($('.selector'), function (el) { return el.value; });
// Get value of the change that was just made
var currentSelect = $(this).val();
// Get the number of occurences of the value that was just selected
var occurences = $.grep(all, function (elem) {
return elem === currentSelect;
}).length;
// If there is more than one occurence (the one that was just selected), then prevent the selection.
if(occurences > 1){
alert("Sorry, you cannot select that item again.");
$(this).val('');
}  
});
});