如何使用If()JavaScript检查类是否被单击

时间:2019-07-06 04:15:58

标签: javascript jquery

我有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();                                  
    }
}

5 个答案:

答案 0 :(得分:0)

要快速修复代码,请执行以下操作:-

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

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

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

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

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

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

答案 1 :(得分:0)

您可以这样做

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

答案 2 :(得分:0)

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

$("[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;
}

答案 3 :(得分:0)

如果使用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>

答案 4 :(得分:-2)

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