Javascript Show/Hide 正文

Question

我正在尝试创建一个列表，当用户点击该列表时，会在其中显示一张图片及其下方的文字。假设对于列表 1，我希望它在单击 link 时显示“价格：$1”。然后对于列表 2，单击 link 时图像下方的“价格：$2”。理想情况下与图像 show/hide 的功能相同。然后当点击离开时，隐藏元素。我是 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: .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>

Javascript Show/Hide 正文

Javascript Show/Hide text

html

javascript

css

menu

show-hide