选择哪些具有其他类

Question

<div class='m1 about'>About</div> 
<div class='m1 contact'>Contact</div> 

<div class="sw about"></div> 
<div class='sw contact'></div> 

一类，我需要：
如果m1 about点击 - sw contact选择

我尝试

$(".m1").click(function(){ 
    var a = $(this).attr("class").split(' ')[1]; 
    $(".sw").hasClass(a).slideDown("slow"); 
}); 

隐而不宣 -
如果m1 contact点击sw about选择没有工作。

Answer 1

的jsfiddle：

http://jsfiddle.net/Vm7aH/6/

试试这个：

$(document).ready(function() { 
    $(".m1").click(function() { 
     var a = $(this).attr("class").split(' ')[1]; 
     if ($(".sw").hasClass(a)) { 
      alert(".sw." + a); 
      $(".sw" + a).slideDown("slow"); 
     } 
    }); 
}); 

Answer 2

改成这样：

JS

$(".m1").click(function(){ 
    var a = $(this).attr("class").split(' ')[1]; 
    if($(".sw").hasClass(a)) 
     $(".sw").slideDown("slow"); 
}); 

jQuery的hasClass返回布尔。

hasClass

Answer 3

而在HTML方面有一点不同，这里是我会怎么做：

http://jsfiddle.net/Lhfz7/3/

<div class='m1' data-target-class='about'>About</div> 
<div class='m1' data-target-class='contact'>Contact</div> 

<div class="sw about"></div> 
<div class='sw contact'></div> 

---

$(document).ready(function() { 

    $(".m1").click(function(){ 
     console.log("hi") 
     var targetClass = $(this).data("target-class") 
     var target = $("."+targetClass) 
     target.text("Selected") 
    }); 

    }); 

Answer 4

虽然你已经接受一个答案，我想我会提供一个替代方法：

// bind the click event-handler: 
$('.m1').click(function(){ 
    // create a string starting with '.', and then join the class-names (from 
    // the classList) together with '.', replacing the 'm1' class-name with 'sw': 
    $('.' + [].join.call(this.classList,'.').replace('m1','sw')) 
    // toggling the display of the found element(s) with a slide down/up: 
    .slideToggle(300); 
}); 

JS Fiddle demo。

参考文献：

• 的JavaScript：
  • Array.prototype.join()。
  • Element.classList^{compatibility}。
  • Function.prototype.call()。
  • String.prototype.replace()。
• 的jQuery：
  • click()。
  • slideToggle()。