Question

我对prepend()有一点问题，因为如果我“复制”我的div并且点击计数器整数div的计数变化与悬停相同。这是可能的更改数量计数还是仅在点击或悬停的div中悬停？

感谢您的帮助和时间：）

HTML

<div class="Wrap">
    <div class="container">
        <div class="count">My Counter</div>
        <div class="background"></div>
        <div class="hover"></div> 
    </div>
</div>
<button class=AddDiv>AddDiv</button>

和javascript

$('.AddDiv').on('click', function() {
    $('.Wrap').prepend($('<div class="container"><div class="count">My Counter</div><div class="background"></div><div class="hover"></div></div>'));
});
var count = 0;
$(".count").click(function() {
    count++;
    $(".count").html(+count);
});

$(".background").on("mouseover", function() {
    $(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function() {
    $(".hover").fadeOut(200);
});

FIDDLE

Answer 1

是的，请使用当前点击的元素对象$(this)：

$(this).html(+count);

而不是：

$(".count").html(+count);

并使用事件委派on()将click事件附加到动态添加到DOM的新元素中：

$("body").on('click',".count",function() {
     count++;
     $(this).html(+count);
});

要为每个div单独递增计数，您应该获得当前计数，然后向其添加1，如：

$("body").on('click',".count",function() {
  var count = parseInt( $(this).text() );

  if( isNaN(count) ){
    count = 1; //For the first click
  }else{
    count++;
  }

  $(this).text(count);
});

希望这有帮助。

＆＃13;

$('.AddDiv').on('click', function(){
  $('.Wrap').prepend($('<div class="container"><div class="count">My Counter</div><div class="background"></div><div class="hover"></div></div>'));

});


$("body").on('click',".count",function() {
  var count = parseInt( $(this).text() );

  if( isNaN(count) ){
    count = 1; //For the first click
  }else{
    count++;
  }

  $(this).text(count);
});

$(".background").on("mouseover", function () {
  $(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function () {
  $(this).fadeOut(200);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
  <div class="container">
    <div class="count"> Click Me
    </div>
    <div class="background">
    </div>
    <div class="hover">
    </div>
  </div>
</div>  
<button class=AddDiv>AddDiv</button>

＆＃13;

Answer 2

我们在这里为每个prepend创建动态ID。并通过将该div id发送到javascript函数并使用与@Zakaria Acharki相同的计数逻辑来维护计数值。

＆＃13;

var divNumber = 1;
$('.AddDiv').on('click', function() {
    $('.Wrap').prepend($('<div class="container"><div class="count" id="div'+divNumber+'" onclick="makeCount(this.id);">My Counter</div><div class="background"></div><div class="hover"></div></div>'));
  divNumber++;
});

function makeCount(id){
  var count = parseInt( $("#"+id).text());
  if( isNaN(count) ){
    count = 1; //For the first click
  }else{
    count++;
  }

  $("#"+id).text(count);
}

$(".background").on("mouseover", function() {
    $(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function() {
    $(".hover").fadeOut(200);
});

＆＃13;

.Wrap
{
  width:650px;
  height:800px;
}
.container
{
  position:relative;
  top:5px;
  left:5px;
  width:200px;
  height:200px;
  background-color:red;
  float:left;
  margin-left:5px;
  margin-top:5px;
}
.AddDiv
{
  position:absolute;
  top:0px;
}
.count
{
  position:absolute;
  width:100px;
  height:100px;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-50px;
  margin-top:-50px;
  background-color:white;
  text-align:center;
  line-height:100px;
  cursor:pointer;  
}
.background
{
  width:20px;
  height:20px;
  background-color:green;
  position:absolute;
  left:170px;
  top:10px;
}
.hover
{
  width:200px;
  height:200px;
  background-color:rgba(255,255,255,0.8);
  position:absolute;
  z-index:1001;
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
    <div class="container">
        <div class="count" id="div0" onclick="makeCount(this.id);">My Counter</div>
        <div class="background"></div>
        <div class="hover"></div> 
    </div>
</div>
<button class=AddDiv>AddDiv</button>

＆＃13;

Answer 3

尝试.insertBefore()功能：

检查：https://jsfiddle.net/mpqtrjzx/

$( '<div class="container"><div class="count">My Counter</div><div class="background"></div><div class="hover"></div></div>' ).insertBefore( ".container:first" );

函数prepend（）jquery悬停和计数器单击

3 个答案: