несколько классов с условным оператором - PullRequest
Новая
       7

несколько классов с условным оператором

0 голосов
/ 26 ноября 2018

В моем коде несколько классов примерно в 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>

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Вы пытаетесь посмотреть, какой элемент выбран из группы?

Я думаю, что подход неправильный, как в структуре HTML, так и в логике с DOM и Javascript.Вы можете поместить свои элементы (HTML) в родительский элемент и использовать делегирование события в родительском элементе.

После этого проверьте параметр на основе выбранного элемента.

$("#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>
0 голосов
/ 26 ноября 2018

Один из вариантов - иметь постоянный объект, свойства которого являются именами классов, а значения - это связанный текст для каждого имени класса - это довольно лаконично, а добавление дополнительных опций тривиально, вам просто нужно определить пары ключ-значение: 

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 вам может быть проще, если, по возможности, вы поместите обработчик щелчка на parent из элементов - таким образом, вам не нужно записывать каждое отдельное имя класса в селекторе, что было бы довольно сложно, если у вас есть тонны классов: 

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">
...