Question

我有2种类型的课程，例如：A-1，A-2，A-3，B-1，B-2，B-3 ...，我想检查是否单击了A-1类，然后将会出现B-1类。如果click（）= Js中的true，是否可以捕获事件click（）？

我已经尝试过for循环以及是否要检查内部，但这是行不通的。非常感谢所有答案。谢谢！

for (var i = 0; i < 10; i++) {
    if($(".A-" + i).click()) {  
    $(".B-" + i).toggle();                                  
    }
}

Answer 1

要快速修复代码，请执行以下操作：-

$("[class^=A-]").on("click",function(){
  $(".B-"+($(this).index() +1)).toggle();
})

有效代码段：-https://jsfiddle.net/ktmLhzv7/

但是更好的方法 是代替A-1,A-2,....和B-1,B-2,....向其添加2个类A-kind，B-kind区分您的元素，然后简单地做：-

$('.A-kind').click(function(){
  $('.B-kind :eq('+$(this).index()+')').toggle();
});

有效代码段：-https://jsfiddle.net/a2qL5zkb/

注意：-这是一个示例示例，元素可以不同，但是如果您具有相同的类，则可以肯定地使用代码。

Answer 2

您可以这样做

^(?!^-)(?!.*-$)(?!.*-{2,})(?=.{4,})(?=.*[A-Za-z0-9-])[A-Za-z0-9-]+$

Answer 3

您需要在事件监听器中定义所需的操作：

$("[id^=A-]").on("click",function(){
console.log($(this).attr('id'));
var last = $(this).attr('id').match(/(\d+)/)[1];
$("#B-"+last).toggle();
})

let allArray = document.querySelectorAll(".clickable");

allArray.forEach(function(allEl) {      
    allEl.addEventListener("click", function() {
        if(!this.classList.contains("on")){
            allArray.forEach(function(allElCl){
                allElCl.classList.remove("on");
            });
            let onArray = document.querySelectorAll("[data-id='" + this.dataset.id + "']");
            onArray.forEach(function(onEl){
                onEl.classList.toggle("on");
            });
        }else{
            allArray.forEach(function(allElCl){
                allElCl.classList.remove("on");
            });
        }
    });
});

.a > div{
    background: dodgerblue;
}

.b > div{
    background: green;
}

.clickable{
  height: 60px;
  width: 60px;
  margin: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-family: sans-serif;
}

.clickable.on{
  background: orangered;
}

Answer 4

如果使用jQuery，则具有相等数量的触发器（A-*）和目标（B-*）很简单。

无需使用连续编号的类，所有触发器都可以使用一个类，而目标则需要一个类。
```
<a href='#/' class='A'>A-1</a1> ... <section class='B'>B-1</section>
```
将click事件委托给所有触发器
```
$('.A').on('click', function() {...
```
确定单击的触发器与其同级触发器相关的索引号
```
var idx = $(this).index();
```
相对于同级目标，将目标切换到相同的索引号
```
$('.B').eq(idx).toggle();
```

有关更多详细信息，请参见.index()和.eq()。

演示1 是上面描述的jQuery，演示2 是普通的JavaScript版本。

演示1-jQuery

$('.A').on('click', function() {
  var idx = $(this).index();
  $('.B').eq(idx).toggle();
});

:root {
  font: 400 3vw/1.2 Consolas
}

a {
  display: inline-block;
  margin: 1vh 1vw;
}

section {
  display: none;
  border: 3px inset grey;
  height: 10vh
}

<nav>
  <a href='#/' class='A'>A-1</a>
  <a href='#/' class='A'>A-2</a>
  <a href='#/' class='A'>A-3</a>
  <a href='#/' class='A'>A-4</a>
  <a href='#/' class='A'>A-5</a>
</nav>
<article>
  <section class='B'>B-1</section>
  <section class='B'>B-2</section>
  <section class='B'>B-3</section>
  <section class='B'>B-4</section>
  <section class='B'>B-5</section>
</article>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

演示2-JavaScript

演示中评论的详细信息

// Register parent of triggers to click event
document.querySelector('nav').onclick = toggleSection;

/** toggleSection(e)
@param: event [Event Object]
//A - event.target always point to the tag user clicked
//B - Collect all .A into a NodeList
//C - Collect all .B into a NodeList
//D - Find .indexOf() of clicked link in relation to it sibling
      links and convert NodeList of links into an array:[...links]
//E - If clicked has class .A...
//F - Get the section tag at the index derived from line D and
      toggle the .active class assignment to it
//G - If clicked tag doesn't have class .A then terminate function
*/
function toggleSection(event) {
  const clicked = event.target; //A
  const links = document.querySelectorAll('.A'); //B
  const sections = document.querySelectorAll('.B'); //C
  const index = [...links].indexOf(clicked); //D

  if (clicked.matches('.A')) { //E
    sections[index].classList.toggle('active'); //F
  }
  return false; //G
}

:root {
  font: 400 3vw/1.2 Consolas
}

a {
  display: inline-block;
  margin: 1vh 1vw;
}

section {
  display: none;
  border: 3px inset grey;
  height: 10vh
}

.active {
  display: block;
}

<nav>
  <a href='#/' class='A'>A-1</a>
  <a href='#/' class='A'>A-2</a>
  <a href='#/' class='A'>A-3</a>
  <a href='#/' class='A'>A-4</a>
  <a href='#/' class='A'>A-5</a>
</nav>
<article>
  <section class='B'>B-1</section>
  <section class='B'>B-2</section>
  <section class='B'>B-3</section>
  <section class='B'>B-4</section>
  <section class='B'>B-5</section>
</article>

Answer 5

您可以在代码中使用两个类，例如“ a-type a-1”，然后检查“ a-type” 是否具有“ a-1” 或不是

如何使用If（）JavaScript检查类是否被单击

5 个答案:

演示1-jQuery

演示2-JavaScript