Jquery 在 div 上创建双数组 .click 函数，用于 div 之间的交互

Question

这是对我昨天的问题的跟进(Jquery Create "array"of .click functions")。)

昨天，我想我会把我问的简化一下，希望我能举一反三。我做不到，还有一些事情我想不通。

所以这个新问题，拜托，我承认我是一个新手，我的问题对你们中的一些人来说可能看起来太愚蠢了，请耐心等待我!

我有一组双 div:

<div id="div_a_1" class="pingpongdiv">hkh</div><div id="div_b_1" class="pingpongdiv">nuigyuig</div>
<div id="div_a_2" class="pingpongdiv">uynyn</div><div id="div_b_2" class="pingpongdiv">,jomoi</div>
<div id="div_a_3" class="pingpongdiv">yfvrcers</div><div id="div_b_3" class="pingpongdiv">rdcsers</div>

目前上面的代码是手写的，以后打算根据自己需要的div组数用Jquery生成。

他们得到了以下 css:

.pingpongdiv { /* make divs nearly invisible */
  opacity: .15;
}

我想通过它们实现以下目标:

当我点击“a”或“b”div 时，它的不透明度通过动画从 0.15 变为 1(变得可见)。不过有一个问题:在我开始“激活”相应的“b”div 之前，我必须至少单击“a”div 一次!

我有以下 jquery 代码(请记住，我是新手，我可能会使用非常繁琐的方法，但它可能更优雅，请帮助我):

// define the array of flags used to check whether an "a" div was clicked on.
var leftPictureSeen = [];
leftPictureSeen[0] = 0; // never used because divs names start at 1

for (var i = 1; ; i++) {
  if ($('#div_a_' + i.toString()).length) // If this div exists, add one more element to the array
    leftPictureSeen[i] = 0;
  else break;
}

// Attach the function that are needed for the divs to be seen and "unseen".
// ATTENTION: Here I mix what I learned yesterday about using "this"
// and I still have an "i" in the function definition, although I know that "i" is out of scope there.
// The idea is that I would like to know how I manage this issue properly so that it works
for (var i = 1; i < leftPictureSeen.length; i++)
{
    $("#div_a_" + i.toString()).click(function(){
        $(this).animate({opacity:1}, 1000);
        // How do I replace the line below so that it works?
        leftPictureSeen[i] = 1; // When an "a" div has been clicked, enable the "b" div click
    });

    $("#div_a_" + i.toString()).mouseout(function(){
        $(this).animate({opacity:.15}, 1000);
    });

    $("#div_b_" + i.toString()).click(function(){
        if (leftPictureSeen[i] === 1) // HOW DO I FIX THIS LINE SO THAT IT WORKS?
            $(this).animate({opacity:1}, 1000);
        else alert("You must click on the 'a' div first...");
    });

    $("#div_b_" + i.toString()).mouseout(function(){
        $(this).animate({opacity:.15}, 1000);
    });

};

可能有一种更简单的方法来完成这一切，也许是通过向“a”div 添加一个 css 属性来指示它们已被单击，我知道什么!

而且，如果这还不够，是否有人愿意向我解释，或者将我发送到某处的链接，解释“i”超出 .click 函数范围的问题，如果那是什么它叫什么？

非常感谢您的耐心……以及您的帮助。

Answer 1

解决该问题的一种方法如下，但请注意我没有使用每个元素的不必要的 id 属性，尽管我已经引入了两个 data-* 属性将允许 CSS 处理动画和淡入:

// binding the anonymous function of the on() method as
// the event-handler for the 'click' event received by
// any element with the 'pingpongdiv' class-name:
$('.pingpongdiv').on('click', function() {
  
  // here we store the current 'letter' of the clicked
  // element, retrieving it from the letter property of
  // the HTMLElement.dataset object, which is the
  // data-letter attribute from the element; then we
  // convert that letter to its lower-case form (this
  // ensures that it will always be lower-case in the
  // following comparison):
  let letter = this.dataset.letter.toLowerCase(),
      
    // we cache the previousElementSibling:
    previous = this.previousElementSibling;

  // if the data-letter attribute is exactly equal to 'a':
  if (letter === 'a') {
    
    // we assign the String 'true' to the value of
    // the HTMLElement.dataset.clicked property,
    // which is also placed in the data-clicked
    // attribute-value:
    this.dataset.clicked = 'true';
    
  // otherwise if the letter is exactly equal to 'b'
  // AND there is a previous element AND that previous
  // element has been clicked (its data-clicked is
  // exactly equal to 'true'):
  } else if (letter === 'b' && previous && previous.dataset.clicked === 'true') {
    
    // we then assign the String of 'true' to
    // the clicked 'b' element (having done this
    // the CSS can now handle the animation):
    this.dataset.clicked = 'true';
  }
  
  // you may notice there's no 'else' statement,
  // this is by design since in the else we'd
  // want nothing to happen anyway.
  
});

body {
  text-align: center;
}
div {
  box-sizing: border-box;
  width: 40%;
  height: 2em;
  line-height: 2em;
  display: inline-block;
  border: 2px solid #000;
  margin-bottom: 1em;
}
.pingpongdiv {
  opacity: 0.2;
  /* setting the transition/animation,
     we transition all properties,
     over a duration of 1 second, and
    use a linear animation to do so: */
  transition: all 1s linear;
}
.pingpongdiv[data-letter=a] {
  border-radius: 1em 0 0 1em;
}
.pingpongdiv[data-letter=b] {
  border-radius: 0 1em 1em 0;
}
.pingpongdiv[data-letter=a][data-clicked=true] {
  border-color: #f90;
}
.pingpongdiv[data-letter=b][data-clicked=true] {
  border-color: limegreen;
}

/* almost everything above this point is purely
   aesthetic; this part handles the animations
   which was defined above (and was the non-
   aesthetic part above): */

/* here we select an element with a class of
   'pingpongdiv' with a 'data-letter' attribute
   equal to 'a' *and* has a 'data-clicked'
   attribute equal to 'true': */
.pingpongdiv[data-letter=a][data-clicked=true],

/* here we select an element of class 'pingpongdiv'
   with a 'data-letter' attribute equal to 'b' *and*
   a 'data-clicked' attribute equal to 'true' which
   follows an element matching the previous selector: */
.pingpongdiv[data-letter=a][data-clicked=true] + .pingpongdiv[data-letter=b][data-clicked=true] {
  
  /* and updates the opacity property, which
     will transition according to the above
     transition property-value: */
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div_a_1" class="pingpongdiv" data-letter="a">hkh</div>
<div id="div_b_1" class="pingpongdiv" data-letter="b">nuigyuig</div>
<div id="div_a_2" class="pingpongdiv" data-letter="a">uynyn</div>
<div id="div_b_2" class="pingpongdiv" data-letter="b">,jomoi</div>
<div id="div_a_3" class="pingpongdiv" data-letter="a">yfvrcers</div>
<div id="div_b_3" class="pingpongdiv" data-letter="b">rdcsers</div>

JS Fiddle demo .

您可能已经从上面代码中的大部分纯 JavaScript 方法中注意到，jQuery 在任何方面都不是满足此问题要求所必需的；所以下面是一个纯 JavaScript 解决方案:

// here we create a named function to handle the checks
// and updates to the data-clicked attributes:
function pairAnimate() {
  // 'this' is passed automatically to the function
  // from the EventTarget.addEventListener() method
  // used later.

  // there are absolutely no changes to any parts
  // of what was the anonymous function (except
  // for its being named, to no longer be an
  // anonymous function):
  let letter = this.dataset.letter.toLowerCase(),
    previous = this.previousElementSibling;

  if (letter === 'a') {
    this.dataset.clicked = true;
  } else if (letter === 'b' && previous && previous.dataset.clicked === 'true') {
    this.dataset.clicked = true;
  }
}


// retrieving a NodeList of all <div> elements that have
// a 'data-letter' attribute, and using Array.from() to
// convert that Array-like NodeList into an Array:
var letterElements = Array.from(document.querySelectorAll('div[data-letter]'));


// iterating over each element in the Array of letterElements
// using Array.prototype.forEach():
letterElements.forEach(

  // here we use an Arrow function to bind the
  // the (poorly-named) 'pairAnimate' function as
  // handler for the 'click' event:
  letterElement => letterElement.addEventListener('click', pairAnimate)
);

body {
  text-align: center;
}
div {
  box-sizing: border-box;
  width: 40%;
  height: 2em;
  line-height: 2em;
  display: inline-block;
  border: 2px solid #000;
  margin-bottom: 1em;
}
.pingpongdiv {
  opacity: 0.2;
  transition: all 1s linear;
}
.pingpongdiv[data-letter=a] {
  border-radius: 1em 0 0 1em;
}
.pingpongdiv[data-letter=b] {
  border-radius: 0 1em 1em 0;
}
.pingpongdiv[data-letter=a][data-clicked=true] {
  border-color: #f90;
}
.pingpongdiv[data-letter=b][data-clicked=true] {
  border-color: limegreen;
}
.pingpongdiv[data-letter=a][data-clicked=true],
.pingpongdiv[data-letter=a][data-clicked=true] + .pingpongdiv[data-letter=b][data-clicked=true] {
  opacity: 1;
}

<div id="div_a_1" class="pingpongdiv" data-letter="a">hkh</div>
<div id="div_b_1" class="pingpongdiv" data-letter="b">nuigyuig</div>
<div id="div_a_2" class="pingpongdiv" data-letter="a">uynyn</div>
<div id="div_b_2" class="pingpongdiv" data-letter="b">,jomoi</div>
<div id="div_a_3" class="pingpongdiv" data-letter="a">yfvrcers</div>
<div id="div_b_3" class="pingpongdiv" data-letter="b">rdcsers</div>

JS Fiddle demo .

引用资料:

• CSS:
  • > Attribute-selectors .
  • > Adjacent sibling (+) combinator .
• HTML:
  • > data-* attributes .
  • "Using data attributes "(MDN)。
• JavaScript:
  • > Array.from() .
  • > Array.prototype.forEach() .
  • > document.querySelectorAll() .
  • > HTMLElement.dataset .
  • > Logical AND (&&) .
  • > NonDocumentTypeChildNode.nextElementSibling .
  • > String.prototype.toLowerCase() .