这是我昨天的问题的跟进（Jquery Create＆＃34; array＆＃34; of .click functions＆＃34;。）
昨天，我以为我会简化我的要求，希望我可以推断。我不能，而且我仍然无法弄明白。
因此，这个新问题，请你承认我是一个新手，我的问题对你们中的某些人来说似乎太愚蠢了，请耐心等待我！
我有一组双div：
.pingpongdiv { /* make divs nearly invisible */
opacity: .15;
}
目前，上面的代码都是手工编写的，我计划将来根据我需要的div数量组生成Jquery。
他们得到了以下css：
// 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);
});
};
我想用它们实现的目标如下：
当我点击＆＃34; a＆＃34;或者＆＃34; b＆＃34; div，它的不透明度由动画从.15变为1（变得可见）。 但是有一个问题：我必须点击＆＃34; a＆＃34;在我到达＆＃34;激活＆＃34;之前至少有一次相应的＆＃34; b＆＃34; DIV！
我有以下jquery代码（记住，我是新手，我可能会使用非常繁琐的方法，它可以更优雅，帮助我）：
{{1}}
可能有一种更简单的方法来完成所有这些，可能是通过向＆＃34; a＆＃34;添加css属性。 div表示他们已被点击，我知道什么！
而且，如果这还不够，有人会善意地向我解释，或者发送给我某个地方的链接来解释＆＃34;我＆＃34;超出.click函数的范围，如果这是它的名称？
非常感谢你的耐心......以及你的帮助。
答案 0 :(得分：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>
正如您在上面的代码中从大多数简单的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>
参考文献：
data-* attributes。答案 1 :(得分：0)
var a = [];
var b = [];
for (var i = 1; i < leftPictureSeen.length; i++) {
a.push("#div_a_" + i);
}
a = a.join(" , ");
b = b.join(" , ");
$(a).on("click", function() {
var i = +$(this).attr("id").replace("div_a_", "");
/* code here for #div_a_x and work with i */
});
$(b).on("click", function() {
var i = +$(this).attr("id").replace("div_b_", "");
/* code here for #div_b_x and work with i */
});
$(a).on("mouseout", function() {
var i = +$(this).attr("id").replace("div_a_", "");
/* code here for #div_a_x and work with i */
});
$(b).on("mouseout", function() {
var i = +$(this).attr("id").replace("div_b_", "");
/* code here for #div_b_x and work with i */
});
答案 2 :(得分：0)
使用next()函数获取下一个元素并向其添加活动类
尝试以下方法：
$(".pingpongdiv[id^='div_a']").click(function(){
$(this).animate({opacity:1}, 1000);
$(this).next().addClass('active');
}).mouseout(function(){
$(this).animate({opacity:.15}, 1000);
});
$('body').on('click',".active",function(){
$(this).animate({opacity:1}, 1000);
}).mouseout(function(){
$('.active').animate({opacity:.15}, 1000);
});.pingpongdiv {
opacity:.15;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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>
答案 3 :(得分：0)
使用jquery fadeTo，它更简单。和indexOf搜索你的id中的字符串，如下所示：
$(".pingpongdiv").click(function(){
if ($(this).attr("id").indexOf("a") > -1)
$(this).fadeTo(1000, 1);
else
alert("You must click on the 'a' div first...");
}).mouseout(function(){
$(this).fadeTo(1000, .15);
});.pingpongdiv {
opacity:.15;
cursor:pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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"></div>