Question

我有一个＆＃34;菜单＆＃34;所有具有相同类别的元素。看起来像这样：

<div id="menu">
   <div class="menu_item">
        first
   </div>
   <div class="menu_item">
        second
   </div>

我怎样才能编写基本类似的jquery：

如果点击的class元素包含＆＃34; first＆＃34;然后做第一个选择。否则，如果它包含＆＃34;第二＆＃34;然后做第二个选择。

我的尝试：

$(".menu_item").click(function(){
    if(".menu_item:contains("first")"){
        $("#first_info").animate({opacity: 1,left: "50%" }, 'slow')
    }

Answer 1

尝试将类添加到菜单项第一个元素first，就像这个<div class="menu_item first">一样。

所以在你的JS中，这解释了，如果.menu_item有类first然后动画#first_info元素，那么就这样做...

  $("body").on('click', '.menu_item', function(){
     if($(this).hasClass('first')){
      $("#first_info").animate({opacity: 1, left: "50%" }, 'slow');
     } else{
      // do this
     }
    });

Answer 2

在你的情况下，你可以做这样的事情。

$(".menu-item").click(function() {
    var text = $(this).attr("class");
    if (text.indexOf("first") != -1) {
        //do option 1
    };
    if (text.indexOf("second") != -1) {
        //do option 2
    };
})

您处理点击事件。在该click事件中，您将检查元素文本。如果没有找到，IndexOf将返回-1，如果找到则返回位置。

当你执行这样的代码时，可以运行这两个选项，说你有一个类first second的元素。如果您不想这样，请嵌套if。

Answer 3

if条件下的语法错误。

元素捕捉错误
撇号错误

您可以使用以下代码段中的语法。此处捕获this元素并使用is方法和contains选择器。

$(".menu_item").click(function() {
  if ($(this).is(":contains('first')")) {  
    $("#first_info").animate({
      opacity: 1,
      left: "50%"
    }, 'slow')
  } else {}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <div class="menu_item">
    first
  </div>
  <div class="menu_item">
    second
  </div>
</div>

Answer 4

        $(".menu_item").click(function(){
    if($(this).text().indexOf($(this).children().attr('id'))!== -1){
        $(this).children().fadeOut(1000).fadeIn(1000);
       }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="menu">
       <div class="menu_item">
            first<div style="background:red" id="first_info" >first_info</div>
       </div>
       <div class="menu_item">
            second<div style="background:yellow" id="second_info" >second_info</div>
       </div>

如果单击的类具有某些文本，请运行jquery

4 个答案: