如何定义单击div时将在两个函数中使用的变量值？

Question

我正在尝试做一些事情，您可以单击箭头按钮以突出显示一个框并显示相应的文本，也可以单击该框以显示相应的文本。

我的箭头按钮可以工作，但是不确定如何合并单击框以显示文本的功能。

现在，箭头按钮的功能具有一个名为“ now”的变量，该变量设置为0。单击该框时必须重新定义该变量，以使箭头按钮仍然有效。

 var p = $('.text > p'); var rect = $('.rectangles > svg'); var now = 0; p.hide().first().show(); rect.css("opacity",".3").first().css("opacity","1") $("#next").click(function (e) { p.eq(now).hide(); rect.eq(now).css("opacity",".3") now = (now + 1 < p.length) ? now + 1 : 0; p.eq(now).show(); rect.eq(now).css("opacity","1") }); $("#prev").click(function(e) { p.eq(now).hide(); now = (now > 0) ? now - 1 : p.length - 1; p.eq(now).show(); }); 

 svg { width: 100px; height: 50px; } rect:hover { fill: black !important; cursor: pointer; } #rect1 { fill: orange; width: 100px; height: 50px; } #rect2 { fill: teal; width: 100px; height: 50px; } #rect3 { fill: violet; width: 100px; height: 50px; } a { text-decoration: none; display: inline-block; padding: 8px 16px; margin-bottom: 2em; } a:hover { background-color: gray; color: black; } #prev, #next { background-color: #e5e5e5; color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" id="prev">&#8249;</a> <a href="#" id="next">&#8250;</a> <Br> <div class="rectangles"> <svg> <rect id="rect1" /> </svg> <svg> <rect id="rect2" /> </svg> <svg> <rect id="rect3" /> </svg> </div> <div class="text"> <p id="text1" class="text">Text 1</p> <p id="text2" class="text">Text 2</p> <p id="text3" class="text">Text 3</p> </div> 

这是小提琴的链接： https : //jsfiddle.net/Lfjyawtd/

Answer 1

您在rect上定义一个click事件，并使用eq()获取rect的当前索引，并相应地更改其不透明度：

 var p = $('.text > p'); var rect = $('.rectangles > svg'); var now = 0; p.hide().first().show(); rect.css("opacity", ".3").first().css("opacity", "1") $("#next").click(function(e) { p.eq(now).hide(); rect.eq(now).css("opacity", ".3") now = (now + 1 < p.length) ? now + 1 : 0; p.eq(now).show(); rect.eq(now).css("opacity", "1") }); $("#prev").click(function(e) { p.eq(now).hide(); now = (now > 0) ? now - 1 : p.length - 1; p.eq(now).show(); }); $('rect').on('click', function() { rect.css("opacity", ".3") rect.eq($(this).index("rect")).css('opacity', '1'); p.hide(); p.eq($(this).index("rect")).show(); }); 

 svg { width: 100px; height: 50px; } rect:hover { fill: black !important; cursor: pointer; } #rect1 { fill: orange; width: 100px; height: 50px; } #rect2 { fill: teal; width: 100px; height: 50px; } #rect3 { fill: violet; width: 100px; height: 50px; } a { text-decoration: none; display: inline-block; padding: 8px 16px; margin-bottom: 2em; } a:hover { background-color: gray; color: black; } #prev, #next { background-color: #e5e5e5; color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" id="prev">&#8249;</a> <a href="#" id="next">&#8250;</a> <Br> <div class="rectangles"> <svg> <rect id="rect1" /> </svg> <svg> <rect id="rect2" /> </svg> <svg> <rect id="rect3" /> </svg> </div> <div class="text"> <p id="text1" class="text">Text 1</p> <p id="text2" class="text">Text 2</p> <p id="text3" class="text">Text 3</p> </div>