选择一个具有附加类的类

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 about 如果点击m1 contact，则会选择sw contact

我的尝试

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

不能工作。

Answer 1

更改为：

<强> JS

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

jquery hasClass返回bool。

hasClass

Answer 2

虽然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 3

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