Question

我写了一个基本的缩略图库，但想知道你是否可以做类似的事情，这样你就可以在页面上多次使用？

$(".thumb-box a").click( function() {
var changeSrc = $(this).attr("href");
var changeText = $(this).find('img').attr('alt');
var title = $(this).attr('title');
$("#bigpic img").attr("src", changeSrc);
$("#caption").html(changeText);
$("#text").html(title);
return false;
});

摘录：

$(".thumb-box a").click( function() {
var changeSrc = $(this).attr("href");
var changeText = $(this).find('img').attr('alt');
var title = $(this).attr('title');
$("#bigpic img").attr("src", changeSrc);
$("#caption").html(changeText);
$("#text").html(title);
return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="columns small-12">
<div id="bigpic">
<picture><img alt="pic1 alt" src="http://via.placeholder.com/600x300"></picture>
</div>
<span class="text-element image-caption" id="caption">Image caption</span>
</div>

<div class="columns small-12">
<p class="paragraph image-text text-center" id="text">Changing description text</p>
<div class="container thumb-box">
<a href="http://via.placeholder.com/600x300" class="responsive-picture thumb-pic" title="pic1 title"><picture><img alt="pic1 alt" src="http://via.placeholder.com/100x100"></picture></a>
<a href="http://via.placeholder.com/600x300" class="responsive-picture thumb-pic" title="pic2 title"><picture><img alt="pic2 alt" src="http://via.placeholder.com/100x100"></picture></a>
<a href="http://via.placeholder.com/600x300" class="responsive-picture thumb-pic" title="pic3 title"><picture><img alt="pic3 alt" src="http://via.placeholder.com/100x100"></picture></a>
</div>
<div class="container thumb-box">
<a href="http://via.placeholder.com/600x300" class="responsive-picture thumb-pic" title="pic4 title"><picture><img alt="pic4 alt" src="http://via.placeholder.com/100x100"></picture></a>
<a href="http://via.placeholder.com/600x300" class="responsive-picture thumb-pic" title="pic5 title"><picture><img alt="pic5 alt" src="http://via.placeholder.com/100x100"></picture></a>
<a href="http://via.placeholder.com/600x300" class="responsive-picture thumb-pic" title="pic6 title"><picture><img alt="pic6 alt" src="http://via.placeholder.com/100x100"></picture></a>
</div>
</div>

Answer 1

要在同一页面上多次使用该代码，您需要做的第一件事就是更新HTML以使用类而不是ID，因为ID必须是唯一的。因此{j}中$("#caption").html(changeText);变为$(".caption").html(changeText);。

然后你可以更新你的函数，这样你只需要更新作为我们工作的包装器后代的caption元素，而不是修改.caption类的每个元素的HTML。内。这样您就可以在每页的多个图库中使用此脚本。

例如，您可以使用$(".caption").html(changeText)代替$(this).closest('.columns').prev('.columns').find('.caption').html(changeCaption);来引用该特定图库中的特定标题（其中$(this)为$(".thumb-box a")）。

这是一个重复三次画廊HTML的片段，以展示这个想法。 And here's a JSFiddle

＆＃13;

$('.thumb-box a').click(function() {
  var changeSrc = $(this).attr('href');
  var changeCaption = $(this).find('img').attr('alt');
  var changeText = $(this).attr('title');
  $(this).closest('.columns').prev('.columns').find('.bigpic img').attr("src", changeSrc);
  $(this).closest('.columns').prev('.columns').find('.caption').html(changeCaption);
  $(this).closest('.columns').find('.text').html(changeText);
  return false;
});

＆＃13;

.bigpic-box {
  position: relative;
  width: 200px;
  height: 100px;
}

.big-pic {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

span.image-caption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: auto;
  padding: 1px 3px;
  border: .0625rem solid #fff;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="columns small-12">
  <div class="bigpic-box">
    <div class="bigpic" class="bigpic">
      <picture><img alt="pic1 alt" src="https://via.placeholder.com/200x100?text=1"></picture>
    </div>
    <span class="image-caption caption">Changing caption</span>
  </div>
</div>

<div class="columns small-12">
  <p class="paragraph image-text text-center text">Changing text</p>
  <div class="container thumb-box">
    <a href="https://via.placeholder.com/200x100?text=1%20top" class="thumb-pic" title="pic1 title">
      <picture><img alt="pic1 alt" src="https://via.placeholder.com/50x50?text=1t"></picture>
    </a>
    <a href="http://via.placeholder.com/200x100?text=2%20top" class="thumb-pic" title="pic2 title">
      <picture><img alt="pic2 alt" src="https://via.placeholder.com/50x50?text=2t"></picture>
    </a>
    <a href="https://via.placeholder.com/200x100?text=3%20top" class="thumb-pic" title="pic3 title">
      <picture><img alt="pic3 alt" src="http://via.placeholder.com/50x50?text=3t"></picture>
    </a>
  </div>
  <div class="container thumb-box">
    <a href="https://via.placeholder.com/200x100?text=4%20top" class="thumb-pic" title="pic4 title">
      <picture><img alt="pic4 alt" src="http://via.placeholder.com/50x50?text=4t"></picture>
    </a>
    <a href="https://via.placeholder.com/200x100?text=5%20top" class="thumb-pic" title="pic5 title">
      <picture><img alt="pic5 alt" src="http://via.placeholder.com/50x50?text=5t"></picture>
    </a>
    <a href="https://via.placeholder.com/200x100?text=6%20top" class="thumb-pic" title="pic6 title">
      <picture><img alt="pic6 alt" src="http://via.placeholder.com/50x50?text=6t"></picture>
    </a>
  </div>
</div>

<div class="columns small-12">
  <div class="bigpic-box">
    <div class="bigpic" class="bigpic">
      <picture><img alt="pic1 alt" src="https://via.placeholder.com/200x100?text=1"></picture>
    </div>
    <span class="image-caption caption">Changing caption</span>
  </div>
</div>

<div class="columns small-12">
  <p class="paragraph image-text text-center text">Changing text</p>
  <div class="container thumb-box">
    <a href="https://via.placeholder.com/200x100?text=1%20mid" class="thumb-pic" title="pic1 title">
      <picture><img alt="pic1 alt" src="http://via.placeholder.com/50x50?text=1t"></picture>
    </a>
    <a href="https://via.placeholder.com/200x100?text=2%20mid" class="thumb-pic" title="pic2 title">
      <picture><img alt="pic2 alt" src="http://via.placeholder.com/50x50?text=2t"></picture>
    </a>
    <a href="https://via.placeholder.com/200x100?text=3%20mid" class="thumb-pic" title="pic3 title">
      <picture><img alt="pic3 alt" src="http://via.placeholder.com/50x50?text=3t"></picture>
    </a>
  </div>
  <div class="container thumb-box">
    <a href="http://via.placeholder.com/200x100?text=4%20mid" class="thumb-pic" title="pic4 title">
      <picture><img alt="pic4 alt" src="http://via.placeholder.com/50x50?text=4t"></picture>
    </a>
    <a href="https://via.placeholder.com/200x100?text=5%20mid" class="thumb-pic" title="pic5 title">
      <picture><img alt="pic5 alt" src="http://via.placeholder.com/50x50?text=5t"></picture>
    </a>
    <a href="https://via.placeholder.com/200x100?text=6%20mid" class="thumb-pic" title="pic6 title">
      <picture><img alt="pic6 alt" src="http://via.placeholder.com/50x50?text=6t"></picture>
    </a>
  </div>
</div>

<div class="columns small-12">
  <div class="bigpic-box">
    <div class="bigpic" class="bigpic">
      <picture><img alt="pic1 alt" src="https://via.placeholder.com/200x100?text=1"></picture>
    </div>
    <span class="image-caption caption">Changing caption</span>
  </div>
</div>

<div class="columns small-12">
  <p class="paragraph image-text text-center text">Changing text</p>
  <div class="container thumb-box">
    <a href="https://via.placeholder.com/200x100?text=1%20bot" class="thumb-pic" title="pic1 title">
      <picture><img alt="pic1 alt" src="http://via.placeholder.com/50x50?text=1t"></picture>
    </a>
    <a href="https://via.placeholder.com/200x100?text=2%20bot" class="thumb-pic" title="pic2 title">
      <picture><img alt="pic2 alt" src="http://via.placeholder.com/50x50?text=2t"></picture>
    </a>
    <a href="https://via.placeholder.com/200x100?text=3%20bot" class="thumb-pic" title="pic3 title">
      <picture><img alt="pic3 alt" src="http://via.placeholder.com/50x50?text=3t"></picture>
    </a>
  </div>
  <div class="container thumb-box">
    <a href="https://via.placeholder.com/200x100?text=4%20bot" class="thumb-pic" title="pic4 title">
      <picture><img alt="pic4 alt" src="http://via.placeholder.com/50x50?text=4t"></picture>
    </a>
    <a href="https://via.placeholder.com/200x100?text=5%20bot" class="thumb-pic" title="pic5 title">
      <picture><img alt="pic5 alt" src="http://via.placeholder.com/50x50?text=5t"></picture>
    </a>
    <a href="https://via.placeholder.com/200x100?text=6%20bot" class="thumb-pic" title="pic6 title">
      <picture><img alt="pic6 alt" src="http://via.placeholder.com/50x50?text=6t"></picture>
    </a>
  </div>
</div>

＆＃13;

请注意，我们在文字未发生变化时遇到的部分问题是由于您的字幕和更改文字有两个不同的class属性。例如，您更改的文字如下所示：

<p class="paragraph image-text text-center" class="text">Changing text</p>

在这种情况下，第二个class属性不会被选中。但由于.text是我们在jQuery中定位的类，这意味着脚本无法正常工作。为了解决这个问题，只需将所有类组合成一个属性，如下所示：

<p class="paragraph image-text text-center text">Changing text</p>

jquery缩略图库在页面上多次使用

1 个答案: