Question

我的代码中有多个类，大约是这里的10倍以上，还有几个类在单击时具有相同的作用。我很少用javascript编写代码，我想要的只是比我在代码中得到的更好的方法来实现这一点。

$(document).ready(function() {
  $(".item1, .item2, .item3").click(function(event) {
    var myClass = $(this).attr("class");
     if (myClass === "item1"){
    document.write("Option 1"); // do something else
    }
    else if (myClass === "item2"){
    document.write("Option 2"); //do something else
    }
    else if (myClass === "item3"){
    document.write("Option 3"); // same thing as option 1
    }
    else document.write("Incorrect");
  });
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div class="item1">item 1</div>
<div class="item2">item 2</div>
<div class="item3">item 3</div>
</body>
</html>

Answer 1

一个选择是拥有一个持久对象，其属性是类名，值是每个类名的关联文本-非常简洁，添加更多选项很简单，您只需要定义键-值对：

const classOptions = {
  item1: 'Option 1',
  item2: 'Option 2',
  item3: 'Option 3',
};

$(".item1, .item2, .item3").click(function(event) {
  const optionText = classOptions[$(this).attr("class")];
  document.write(optionText || 'Incorrect');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item1">item 1</div>
<div class="item2">item 2</div>
<div class="item3">item 3</div>

如果不是，如果可能的话，将点击处理程序放置在项目的父项上，可能会比$(".item1, .item2, .item3").click更容易-这样，您就不必在选择器中写出每个单独的类名，如果您有大量的类，那将是一件很痛苦的事情：

const classOptions = {
  item1: 'Option 1',
  item2: 'Option 2',
  item3: 'Option 3',
};

$(".container").click(({ target }) => {
  const optionText = classOptions[$(target).attr("class")];
  document.write(optionText || 'Incorrect');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="item1">item 1</div>
  <div class="item2">item 2</div>
  <div class="item3">item 3</div>
</div">

Answer 2

您是否要查看从组中单击了哪个项目？

在HTML结构以及DOM和Javascript的逻辑中，我认为该方法是错误的。您可以将项目（HTML）放在父级中，并在父级上使用event delegation。

然后，根据单击的元素检查选项。

$("#parent").click( function(event) {

    var elementClass  = event.target.className,
        $output       = $("#output");

    //  NOTE: We asume that the Element has one class
    switch (elementClass) {
      case "item1":
        $output.text("Option 1");
        break;
      case "item2":
        $output.text("Option 2");
        break;
      case "item3":
        $output.text("Option 3");
        break;
    }

});

#parent > * {
  width : 100px;
  height : 100px;
  display : inline-block;
  background : red;
}

#parent > div:not(:first-of-type) {
  margin-left : 20px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="parent">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
</div>

<br>
<div id="output"></div>

有条件语句的多个类

2 个答案: