多个类带条件语句

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

一个选项是拥有一个持久对象，其属性是 class 名称，值是每个 class 名称的关联文本 - 它非常简洁，添加更多选项是微不足道的，您只需要定义键值对：

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 更容易 - 这样，您不必在选择器中写出每个 class 名称，如果您有大量 classes:

，这将是一件很痛苦的事情

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>

多个类带条件语句

multiple classes with conditional statement

javascript

conditional

多个 类 带条件语句

multiple classes with conditional statement

javascript

conditional

多个类带条件语句