Question

您从空白画布开始。点击添加按钮， BAM ....我们有一个按钮

$(".add-query").on('click', function() {
  $(".beauty-btns").append("<a class='" + $('.mediaquery-slider').val() + "' href='javascript:void(0)'>" + $('.mediaquery-slider').val() + "px</a>");

  // Remove Query
  $(".beauty-btns").find("a").on('click', function() {
    $(this).remove();
  });
});

简单我知道;但是，如果班级或ID已经存在怎么办？好吧，如果它是一个类，我们可以添加多个，但不是在我的实验中。

我要做的是添加按钮，但如果该类已存在，则提醒用户并询问他们是否要更换按钮或取消。

我知道我可以在这里使用window.confirm进行提醒过程，但之后我很困惑。

示例：

    var x = window.confirm("Are you sure you want to refresh the page?")
    if (x)
      location.reload(true);
    else
      return false;

非常感谢任何帮助。

Answer 1

要检查某个类是否存在，只需选择它并查看是否存在length的任何内容：

var val = $('.mediaquery-slider').val();
var $button = $(".beauty-btns").find('a.' + val);
//notice the . after a for "select by class".

//$button is supposed to contain an array of matches, length = 0 with no match
if($button.length > 0) {
    alert("Button already exists!");
}

现在有关替换它的代码，你几乎拥有它：

var x = window.confirm("Button exists, replace it?") //will give OK/Cancel buttons
if (x)
  $button.replaceWith("<a class='" + $('.mediaquery-slider').val() + "' href='javascript:void(0)'>" + $('.mediaquery-slider').val() + "px</a>");
else
  return false; //Depending on the situation you could just leave off the else block.

备注

如果我没有弄错的话，你的课程将以数字开头。这是无效的。先写一个字母：

var val = 'button-' + $('.mediaquery-slider').val();

在你的情况下使用ID实际上更好，因为据说每个滑块值只能有一个按钮。

我真的不明白你为什么要更换这些按钮。毕竟，您使用完全相同的HTML替换它们。您将丢失所有事件处理程序和其他javascript数据。现在我注意到，你正在以错误的方式附加处理程序！

存储您用于追加最后一个按钮的类，然后只在该按钮上设置一个点击处理程序：

$(".beauty-btns").find("a." + val).on('click', function() { $(this).remove(); });

如果您不这样做，每次添加一个按钮时，每个现有按钮都会继续获得新的点击处理程序。这在内存和性能方面效率不高。

检查附加前是否添加了元素/ ID /类

1 个答案: