javascript - 如何定义单击 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>

这是 fiddle 链接:https://jsfiddle.net/Lfjyawtd/

Answer 1

您在 rect 上定义一个点击事件，并使用 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>