删除jQuery中的事件不起作用

Remove event in jQuery not working

本文关键字：事件 不起作用 jQuery 删除      更新时间：2024-02-28

这是我的代码：

    <div id="header">
        <h2>Jump for Joy Sale</h2>
    </div>
    <div id="main">
        <div class="guess-box"><img src="img/saina1.png" />
        </div>
        <div class="guess-box"><img src="img/saina1.png" />
        </div>
        <div class="guess-box"><img src="img/saina1.png" />
        </div>
        <div class="guess-box"><img src="img/saina1.png" />
        </div>
    </div>
    <script>
    $(document).ready(function() {
        $(".guess-box").click(function() {
            $(".guess_box p").remove();
            var discount = Math.floor((Math.random() * 5) + 5);
            var discount_msg = "<p>Your Discount is " + discount + "%</p>";
            $(this).append(discount_msg);
        }); //end click function
    }); //end doc ready
    </script>

这是我的小提琴。

当点击一张图片时，它会显示一个随机折扣，再次点击后应该会隐藏它，但它会一次又一次地显示折扣。我尝试使用remove事件，但它不起作用。

您针对p元素使用了错误的选择器。它应该是CCD_ 1

$(".guess-box").click(function() {
  $(".guess-box p").remove();
  var discount = Math.floor((Math.random()*5) + 5);
  var discount_msg = "<p>Your Discount is "+ discount +"%</p>";
  $(this).append(discount_msg);
});

此外，您应该只删除当前点击的p元素，并为其他元素保留：

$(".guess-box").click(function() {
  $(this).find("p").remove();
  .......

工作演示

发生这种情况是因为您说的是

$(this).append(discount_msg);

这将始终在末尾附加值。

什么时候你应该这样做

$(this).html(discount_msg);

这将删除现有的任何值，并用新的替换

注意：这也将删除图像。因此，您也应该在选择器中指定p标记

相关文章：