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

您可以在.banner { padding: 0 40px; margin: 0 auto; background-position: center; background-size: cover; text-align: center; display: flex; justify-content: center; width: 40%; height: 25vh; }  <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div class="banner"> <div class="row"> <img src="http://bayavenue.ae/wp-content/gallery/diplomat-man-salon/IMG-20150513-WA0013.jpg" class="img-responsive"/> </div </div> </body> </html> 上定义点击事件，并使用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;
}

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

1 个答案: