如何通过选择3个div来改变dinamically创建的div上的颜色并双击以使用jquery更改第三个div上的颜色?

时间:2017-04-15 20:41:24

标签: javascript jquery html

我在jquery中编码。我在jquery中双击需要帮助。 div是动态创建的,我无法在任何地方找到如何选择2或3个动态创建的div并双击第三个div来改变颜色。总共所有3个选定的div应该改变颜色。

希望有人可以帮助解决这个问题:)

HTML

<body>
<div>
    <label>
        <input id="numberOfDivs" type="number">
    </label>
    <input id="createBtn" type="button" value="Generate">
</div>

<div id="divWrapper"></div>

<script src="script/jquery-3.2.0.min.js" type="text/javascript"></script>
<script src="js/Script.js"  type="text/javascript"></script>

Jquery的

$("#createBtn").click(function(){
var counter = 1;
var values = $("#numberOfDivs").val();
for(i = 0; i < values ; i++){
    var $div = $("<div>"  + counter +  "</div>")
        .css({"width": "50px", "height": "50px","background-color": "red", "margin": "5px", "float": "left"
    })
      .attr({
        class: "dClones"

    $("#divWrapper").append($div);
    counter++;
}

$(".dClones").bind("dblclick", function(){
   $(this).css({"background": "purple"})
});
});

1 个答案:

答案 0 :(得分:0)

以下是切换类和取消停靠的示例。

$('body').on('dblclick','.dClones', function() {
  var me = this;
  if (!$(me).hasClass('css-double')) {
    $(me).addClass('css-double');
  } else {
    $(me).removeClass('css-double');
  }
});

你只需要使用.on一次就可以使用所有动态和静态放置的.dClones。

cLass的替代方法是.css,但您必须知道要添加和恢复的样式。