選擇哪些具有其他類

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()。