jquery - onClick 元素将 Classname 添加到具有相同 Classname 的相关 div

Question

我有两个容器。第一个容器 ( .links ) 具有类名称为 block-1, block-2 的 anchor 标记。等等...

第二个容器( .highlight-block )与 block-1, block-2 具有相同的类名等等...

FIDDLE

HTML

<div class="links">
    <a href="#" class="lb block-1">Highlight Block 1</a>
    <a href="#" class="lb block-2">Highlight Block 2</a>
    <a href="#" class="lb block-3">Highlight Block 3</a>
    <a href="#" class="lb block-4">Highlight Block 4</a>
    <a href="#" class="lb block-5">Highlight Block 5</a>
    <a href="#" class="lb block-6">Highlight Block 6</a>
</div>

<div class="highlight-block">
    <div class="cb block-1 active">This is Block 1</div>
    <div class="cb block-2">This is Block 2</div>
    <div class="cb block-3">This is Block 3</div>
    <div class="cb block-4">This is Block 4</div>
    <div class="cb block-5">This is Block 5</div>
    <div class="cb block-6">This is Block 6</div>
</div>

例如:如果我点击<a href="#" class="lb block-2">Highlight Block 2</a>来自.links容器... <div class="cb block-2">This is Block 2</div>应该采取 .active类

jQuery

$(document).ready(function () {
    $('.links a').click(function () {
        $('.highlight-block').find('.cb').toggleClass('active');
    });
});

CSS

body {
    font-family:arial;
    font-size:12px;
}
.links .lb {
    margin-left:5px;
}
.highlight-block .cb {
    background:#eee;
    padding:10px;
    border:1px solid #666;
    margin:5px;
}
.highlight-block .cb.active {
    background:#5cb85c;
    border-color:#1E6B1E;
    color:#fff;
} 

Answer 1

如果它们的顺序相同，那么使用元素的索引而不是通用的类名会更容易一些:

// bind a click-handler for the <a> elements that are descendants
// of a '.links' element:
$('.links a').click(function () {

    // gets the index of the clicked element
    // from amongst its siblings:
    var i = $(this).index();

    // selects the <div> elements that are descendants of
    // a '.highlight-block' element:
    $('.highlight-block div')

    // finds the element that has an index in the collection
    // (not amongst its siblings) equal to the index of
    // the clicked <a> element:
    .eq(i)

    // adds the 'active' class-name to that <div>:
    .addClass('active')

    // selects the sibling elements of the <div>:
    .siblings()

    // and removes the 'active' class-name:
    .removeClass('active');
});

$('.links a').click(function() {
  var i = $(this).index();
  $('.highlight-block div.cb')
  .eq(i)
  .addClass('active')
  .siblings()
  .removeClass('active');
});

.links a {
  display: inline-block;
  border: 1px solid #000;
  margin: 0 0.25em;
}

.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="links">
  <a href="#" class="lb block-1">Highlight Block 1</a>
  <a href="#" class="lb block-2">Highlight Block 2</a>
  <a href="#" class="lb block-3">Highlight Block 3</a>
  <a href="#" class="lb block-4">Highlight Block 4</a>
  <a href="#" class="lb block-5">Highlight Block 5</a>
  <a href="#" class="lb block-6">Highlight Block 6</a>
</div>

<div class="highlight-block">
  <div class="cb block-1 active">This is Block 1</div>
  <div class="cb block-2">This is Block 2</div>
  <div class="cb block-3">This is Block 3</div>
  <div class="cb block-4">This is Block 4</div>
  <div class="cb block-5">This is Block 5</div>
  <div class="cb block-6">This is Block 6</div>
</div>

外部JS Fiddle demo .

或者，如果您希望允许多个突出显示处于事件状态:

// selects the <a> element descendants of a '.links'
// element, and binds a click event-handler:
$('.links a').click(function () {

    // finds the index of the clicked <a>
    // amongst its sibling elements:
    var i = $(this).index();

    // finds the <div> elements that are descendants of
    // a '.highlight-block' element:
    $('.highlight-block div')

        // finds the <div> element whose index in the
        // collection is equal to the index of the <a>:
        .eq(i)

        // adds the 'active' class-name if it's not present,
        // removes the 'active' class-name if it is present:
        .toggleClass('active');
});

$('.links a').click(function () {
    var i = $(this).index();

    $('.highlight-block div')
        .eq(i)
        .toggleClass('active');
});

.links a {
  display: inline-block;
  border: 1px solid #000;
  margin: 0 0.25em;
}

.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="links">
  <a href="#" class="lb block-1">Highlight Block 1</a>
  <a href="#" class="lb block-2">Highlight Block 2</a>
  <a href="#" class="lb block-3">Highlight Block 3</a>
  <a href="#" class="lb block-4">Highlight Block 4</a>
  <a href="#" class="lb block-5">Highlight Block 5</a>
  <a href="#" class="lb block-6">Highlight Block 6</a>
</div>

<div class="highlight-block">
  <div class="cb block-1 active">This is Block 1</div>
  <div class="cb block-2">This is Block 2</div>
  <div class="cb block-3">This is Block 3</div>
  <div class="cb block-4">This is Block 4</div>
  <div class="cb block-5">This is Block 5</div>
  <div class="cb block-6">This is Block 6</div>
</div>

外部JS Fiddle demo .

但是，如果您确实想使用关联的类名，那么我可以提供(但不会真正推荐):

// binding a click event-handler to the <a> elements
// which are descendants of a '.links' element:
$('.links a').click(function () {

    // getting an Array-like list of class-names from the DOM node,
    // and using Function.prototype.call() to allow us to use the
    // Array.prototype.slice() in order to convert the Array-like
    // list into an actual Array:
    var allClasses = Array.prototype.slice.call(this.classList, 0),

    // filtering the Array of class-names with Array.prototype.filter():
        n = allClasses.filter(function (c) {
            // the first argument to the anonymous function ('c')
            // is the array-element of the array over which
            // we iterate with the filter() method.

            // if the following assessment evaluates to true
            // the array-element is returned; if it evaluates
            // to false it is discarded.

            // here we're using RegExp.prototype.test() to
            // keep only those array-elements (the String of
            // each class-name) which matches a pattern of a
            // String 'block-' followed by one or more ('+')
            // numbers '\d' and the end-of-string ('$'):
            return /block-\d+$/.test(c);

        // we then convert that Array to a string:
        }).toString()

        // and then find the string of digits ('\d'),
        // one or more ('+') that end the string ('$'):
        .match(/\d+$/);

    // because String.prototype.match() returns an Array
    // or null we first ensure that there is a returned
    // value ('if (n)'):
    if (n) {

        // selecting the <div> element with the class-name
        // of 'block-N' (where 'N' is the found-number):
        $('.highlight-block div.block-' + n)

            // adding the 'active' class-name to that <div>:
            .addClass('active')

            // selecting the sibling elements:
            .siblings()

            // removing the 'active' class-name:
            .removeClass('active');
    }
});

$('.links a').click(function() {
  var allClasses = Array.prototype.slice.call(this.classList, 0),
    n = allClasses.filter(function(c) {
      return /block-\d+$/.test(c);
    }).toString().match(/\d+$/);
  if (n) {
    $('.highlight-block div.block-' + n)
      .addClass('active')
      .siblings()
      .removeClass('active');
  }
});

.links a {
  display: inline-block;
  border: 1px solid #000;
  padding: 0.25em;
  margin: 0.2em;
  border-radius: 0.5em;
}
.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="links"> <a href="#" class="lb block-1">Highlight Block 1</a>
  <a href="#" class="lb block-2">Highlight Block 2</a>
  <a href="#" class="lb block-3">Highlight Block 3</a>
  <a href="#" class="lb block-4">Highlight Block 4</a>
  <a href="#" class="lb block-5">Highlight Block 5</a>
  <a href="#" class="lb block-6">Highlight Block 6</a>

</div>
<div class="highlight-block">
  <div class="cb block-1 active">This is Block 1</div>
  <div class="cb block-2">This is Block 2</div>
  <div class="cb block-3">This is Block 3</div>
  <div class="cb block-4">This is Block 4</div>
  <div class="cb block-5">This is Block 5</div>
  <div class="cb block-6">This is Block 6</div>
</div>

外部JS Fiddle demo .

虽然实际上更容易找到单击的<a>的相关类名元素，然后简单地使用它(而不是上面的方法，我错过了类名 'block-n' 是相同的事实:

// finding the <a> element descendants of '.links' elements, and
// binding a click event-handler:
$('.links a').click(function () {

    // converting the Array-like list of class-names to an Array:
    var allClasses = Array.prototype.slice.call(this.classList, 0),

        // using the Array.prototype.filter() Array method
        // to find those array-elements (the class-names)
        // that have a string of 'block-' followed by a
        // numeric character ('\d') repeated one or more times
        // ('+') followed by the end of string ('$'):
        blockClass = allClasses.filter(function (c) {
            return /block-\d+$/.test(c);
        // converting the Array to a string:
        }).toString();

    // finding the <div> element descendants of a
    // '.highlight-block' element whose class-name
    // (the descendant <div>) is equal to the class
    // -name we found above from the clicked <a>:
    $('.highlight-block div.' + blockClass)

        // adding the 'active' class-name:
        .addClass('active')

        // finding the siblings of the <div>:
        .siblings()

        // removing the 'active' class-name:
        .removeClass('active');;
});

$('.links a').click(function() {
  var allClasses = Array.prototype.slice.call(this.classList, 0),
    blockClass = allClasses.filter(function(c) {
      return /block-\d+$/.test(c);
    }).toString();

  $('.highlight-block div.' + blockClass)
    .addClass('active')
    .siblings()
    .removeClass('active');;
});

.links a {
  display: inline-block;
  border: 1px solid #000;
  padding: 0.25em;
  margin: 0.2em;
  border-radius: 0.5em;
}
.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="links"> <a href="#" class="lb block-1">Highlight Block 1</a>
  <a href="#" class="lb block-2">Highlight Block 2</a>
  <a href="#" class="lb block-3">Highlight Block 3</a>
  <a href="#" class="lb block-4">Highlight Block 4</a>
  <a href="#" class="lb block-5">Highlight Block 5</a>
  <a href="#" class="lb block-6">Highlight Block 6</a>

</div>
<div class="highlight-block">
  <div class="cb block-1 active">This is Block 1</div>
  <div class="cb block-2">This is Block 2</div>
  <div class="cb block-3">This is Block 3</div>
  <div class="cb block-4">This is Block 4</div>
  <div class="cb block-5">This is Block 5</div>
  <div class="cb block-6">This is Block 6</div>
</div>

外部JS Fiddle .

引用文献:

JavaScript:
• Array.prototype.filter() .
• Array.prototype.slice() .
• Array.prototype.toString() .
• Element.classList .
• Functionn.prototype.call() .
• JavaScript Regular Expressions Guide .
• RegExp.prototype.test() .
• String.prototype.match() .
• jQuery:
  • addClass() .
  • click() .
  • eq() .
  • index() .
  • removeClass() .
  • siblings() .
  • toggleClass() .