Javascript 显示/隐藏文本

Question

我正在尝试创建一个列表，当用户单击该列表时，会显示一个图像及其下方的文本。假设列表 1，我希望它在单击链接时显示“价格：1 美元”。然后对于列表 2，单击链接时图像下方的“价格：2 美元”。理想情况下，与图像显示/隐藏的功能相同。然后当点击离开时，隐藏元素。我对 JS 还很陌生，但到目前为止我收集到的内容如下：

$(function () {
  $(".imgPreview").hide();
  $(".unstyled li a").click(function () {
    $(".imgPreview").show().find("img").attr("src", $(this).attr("href"));

    return false;
  });
  $("body").click(function () {
    $(".imgPreview").hide();

  });
});

* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
body {margin: 10px;}
li {margin: 25px;}
.unstyled, .imgPreview, .showPrice {float: left; width: 50%;}
.unstyled, .imgPreview img {max-width: 100%;}
p {margin: 5px;}

.recycle-button {
    padding: 6px 6px;
    background-color: rgb(53, 189, 208);
    border-radius: 5px;
    color: white;
    margin-bottom: 0px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="margin-bottom: 35px;">
<h3>LIST</h3> </div>
<ul class="unstyled">
  <li><a href="http://placehold.it/350x150" class="recycle-button">List 1</a></li>
  <li><a href="http://placehold.it/350x150" class="recycle-button">List 2</a></li>
  <li><a href="http://placehold.it/350x150" class="recycle-button">List 3</a></li>
  <li><a href="http://placehold.it/350x150" class="recycle-button">List 4</a></li>
  <li><a href="http://placehold.it/350x150" class="recycle-button">List 5</a></li>
  <li><a href="http://placehold.it/350x150" class="recycle-button">List 6</a></li>
</ul>
<div class="imgPreview">
  <img src="" alt="" width="350" height="150"/>
</div>

我的目标是拥有像this 这样的东西。

编辑：

到目前为止，我已经尝试将属性 data-price 添加到元素 以保存价格数据：

<li><a href="http://placehold.it/350x150" class="recycle-button" data-price="Price: $3.20">List 1</a></li>

并让脚本对 imgPreview 执行相同的功能：

$(".imgPreview").show().find("p").attr($(this).attr("data-price"));

我是fiddling，我收到的错误是“脚本错误”。当然，您可以看到我对 JS 的了解有限。

Answer 1

也许你想要这样的东西......

$(function () {
  $(".imgPreview").hide();
  $(".unstyled li a").click(function (event) {
    var listItem = event.target.parentElement;
    var image = $(".imgPreview");
    image.show();
    image.find("img").attr("src", $(this).attr("href"));
    $(image.find("span"))[0].innerHTML="Price = $"+ ($( "li" ).index( listItem ) + 1);
    return false;
  });
  $("body").click(function () {
    $(".imgPreview").hide();

  });
});

* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
body {margin: 10px;}
li {margin: 25px;}
.unstyled, .imgPreview, .showPrice {float: left; width: 50%;}
.unstyled, .imgPreview img {max-width: 100%;}
p {margin: 5px;}

.recycle-button {
    padding: 6px 6px;
    background-color: rgb(53, 189, 208);
    border-radius: 5px;
    color: white;
    margin-bottom: 0px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="margin-bottom: 35px;">
<h3>LIST</h3> </div>
<ul class="unstyled">
  <li><a href="http://placehold.it/350x150" class="recycle-button">List 1</a></li>
  <li><a href="http://placehold.it/350x150" class="recycle-button">List 2</a></li>
  <li><a href="http://placehold.it/350x150" class="recycle-button">List 3</a></li>
  <li><a href="http://placehold.it/350x150" class="recycle-button">List 4</a></li>
  <li><a href="http://placehold.it/350x150" class="recycle-button">List 5</a></li>
  <li><a href="http://placehold.it/350x150" class="recycle-button">List 6</a></li>
</ul>
<div class="imgPreview">
  <img src="" alt="" width="350" height="150"/>
  <span id="priceView"></span>
</div>