仅当类存在于Javascript中时才允许侦听器事件运行

Only allow listener event to run if class exists in Javascript

本文关键字：侦听器 运行 事件 存在 Javascript      更新时间：2023-09-26

我构建了一个进度条Javascript对象，当用户点击绑定了"点击"事件监听器的左按钮或右按钮时，该对象会更新进度条。我只希望这些按钮在附加了某个类的情况下触发点击事件，在本例中是一个名为"进度条ok"的类。到目前为止，我似乎想不出在代码中实现这一点的方法。这是我的代码：

Javascript对象：

//Progress Bar
var ProgressBar = function(element, startVal, endVal, step, addLefts, addRights) {
    this.element = element;
    this.endVal = endVal;
    this.currentVal = startVal;
    this.step = step;
    this.addLefts = addLefts;
    this.addRights = addRights;
    var self = this;    
}
ProgressBar.prototype.initializeProgressBar = function() {
    jQuery(this.element).progressbar({
        value : this.currentVal,
        max   : this.endVal,
        step  : this.step
    });
    for(var i = 0; i < this.addLefts.length; i++) {
        this.addLefts[i].addEventListener("click", this.removeAmount.bind(this), false);
    }   
    for(var i = 0; i < this.addRights.length; i++) {
        this.addRights[i].addEventListener("click", this.addAmount.bind(this), false);
    }   
}
ProgressBar.prototype.addAmount = function() {  
    if(this.currentVal < this.endVal) {
        this.currentVal += this.step;       
        this.update();
    }       
}
ProgressBar.prototype.removeAmount = function() {
    console.log(self);
    if(this.currentVal > 0) {
        this.currentVal -= this.step;
        this.update();
    }
}
ProgressBar.prototype.update = function() {
    jQuery(this.element).progressbar({
        value : this.currentVal
    });
}

Javascript客户端代码

//Progress Bar
        var addLefts = document.getElementsByClassName("btn-lft");
        var addRights = document.getElementsByClassName("btn-right");
        var progressBar = new ProgressBar("#progress-bar", 0, jQuery(".signup-part").length, 1, addLefts, addRights);
        progressBar.initializeProgressBar();

正如你所看到的，"addLefts"answers"addRights"附加了click监听器，我只想在类"progress bar ok"存在的情况下激发"addAmount"answers"removeAmount"函数。有没有一种方法可以将它合并到我的代码中？感谢

您可以检查DOM中是否存在类似的带有类的元素

if ($('.progress-bar-ok').length) {
    your code
}

如果使用jQuery创建事件处理程序，则可以利用委派事件，只有当目标具有您指定的类时才会触发委派事件。在这种情况下，您可以使用".progress-bar-ok"作为选择器，并且只有具有该类的项才会触发事件。

以下是更新的部分代码：

ProgressBar.prototype.initializeProgressBar = function() {
    jQuery(this.element).progressbar({
        value : this.currentVal,
        max   : this.endVal,
        step  : this.step
    });
    var removeAmount = this.removeAmount.bind(this);
    $(addLeft).on("click", ".progress-bar-ok", function() {
        removeAmount();
    });
    var addAmount = this.addAmount.bind(this);
    $(addRights).on("click", ".progress-bar-ok", function() {
        addAmount();
    });
}
var progressBar = new ProgressBar("#progress-bar", 0, jQuery(".signup-part").length, 1, ".btn-lft", ".btn-right");

我已经更改了您的构造函数，以接收您想要针对的类的jQuery选择器，您可以看到我是如何使用jQuery附加事件处理程序的。

我还制作了一个简单的可运行的例子来演示这种效果。下面有两个<ul>标签，它们使用您的类btn-lft和btn-right。我在每个<ul>中生成了一个随机数目的项目。其中的每个CCD_ 6可以被随机分配一个CCD_。当单击具有该类的项目时，父<ul>将被清除，并再次随机填充。单击没有类别progress-bar-ok的项目时不会发生任何事情。运行下面的代码段查看。

$(function() {
  //generate arbitrary ul content
  generateSide($(".btn-lft"));
  generateSide($(".btn-right"));
});
$(".btn-lft,.btn-right").on("click", ".progress-bar-ok", function() {
  //this is a delegated event, it handles dynamically created items too!
  var ul = $(this).parent();
  generateSide(ul);
});
function generateSide(ul) {
  //add random content to the ul
  var side = ul.hasClass("btn-lft") ? "Left" : "Right";
  ul.empty(); //clear ul
    
  var numberSelected = 0;
  var newItems = Math.ceil(Math.random() * 10);
  for(var i = 0; i < newItems; i++) {
    var li = $("<li>" + side + " " + (i + 1) + "</li>");
    if (Math.random() > 0.5 || (numberSelected === 0 && i === newItems - 1 ))
      li.addClass("progress-bar-ok");
    ul.append(li);
  }
}
ul {
  float:left;
  width: 100px;
}
.progress-bar-ok {
  color: #4AF;
  cursor: pointer;
}
.progress-bar-ok:hover {
  text-shadow: 0 0 2px blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="btn-lft">
  <li class="selected">Left 1</li>
</ul>
<ul class="btn-right">
  <li class="selected">Right 1</li>
</ul>

相关文章：