Question

我有几个共享同一个类的div。我有一个下拉列表，在选择时更改其中一个div的背景颜色（选项2更改div＃2）我的问题是如何在点击某个div时更改下拉选项？我有改变实际选项和div点击的逻辑，但我无法弄清楚如何找到确切点击了哪些div（div是动态创建的，所以他们没有ID，只有班级名称）有没有办法检查哪个div相对于具有相同类的整个div列表？谢谢。
示例代码：

<select class="size form-control" id="size" name="size">
<option value="1">first div</option>
<option value="2">second div</option>
<option value="4">third div..</option>
</select>

<div class="collection">random</div>
<div class="collection">text</div>
<div class="collection">inside</div>
<div class="collection">here</div>

编辑：
我有什么：
select可以根据选择改变div的颜色单击div会更改它自己的颜色我需要什么：
单击div也会更改选择中的选项。我希望现在有点清楚

Answer 1

使用jQuery您可以使用.index()

获取所点击的div的索引

＆＃13;

$('div.collection').click(function () {
    var index = $('div.collection').index($(this));
    console.log(index);

    $('select').val(index + 1);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collection">Div1</div>
<div class="collection">Div2</div>
<div class="collection">Div3</div>
<div class="collection">Div4</div>

<select class="size form-control" id="size" name="size">
    <option value="1">first div</option>
    <option value="2">second div</option>
    <option value="4">third div..</option>
</select>

＆＃13;

Answer 2

你可以使用jQuery，它很简单：

<select class="size form-control" id="size" name="size">
  <option value="1">first div</option>
  <option value="2">second div</option>
  <option value="4">third div..</option>
</select>

<div class="collection">Div1</div>
<div class="collection">Div2</div>
<div class="collection">Div3</div>
<div class="collection">Div4</div>

jQuery的：

$('div.collection').click(function(){
var index = $('div.collection').index($(this)) + 1;
  $('select').val(index);
});

示例：http://codepen.io/ilanus/pen/zBgvJr

Answer 3

围绕父div包裹div并使用index()获取div的位置

＆＃13;

$('.collection').click(function(){
  var position = $(this).index()+1;
  console.log(position);
  $('.size').val(position);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="size form-control" id="size" name="size">
<option value="1">first div</option>
<option value="2">second div</option>
<option value="3">third div..</option>
  <option value="4">Fourth div..</option>
</select>
<div>
  <div class="collection">random</div>
  <div class="collection">text</div>
  <div class="collection">inside</div>
  <div class="collection">here</div>
</div>

＆＃13;

Answer 4

您可以关注此Pen。

<div id='parentDiv'>
   <div class="clickMe">1</div>
   <div class="clickMe">2</div>
   <div class="clickMe">3</div>
   <div class="clickMe">4</div>
</div>
<select name="dropDown">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<style>
.clickMe{
  clear:both;
  width:20px;
  height:20px;
  border:1px solid black;
  margin: 20px;
}
</style>

<script>
$('#parentDiv').on('click','.clickMe',function(){
  console.log($(this).index());
      var index= $(this).index();
      $('select[name=dropDown] option:eq('+index+')').attr('selected', 'selected');
});
</script>

感谢。请告诉它是否正常。

找出从元素列表中单击的元素

4 个答案: