使用 .onclick 在幻灯片中显示正确的文本

Show the right text in a slideshow with .onclick

本文关键字：文本 显示 onclick 幻灯片 使用      更新时间：2023-09-26

我用JavaScript做了一个简单的幻灯片，工作正常。我想在用户单击图片时显示特定的文本块。

.HTML： 

<p>
                <img src="images/USA/desert (2).jpg" id="images/USA/desert.jpg" class='miniature'>
                <img src="images/USA/dropdown_map (2).jpg" id="images/USA/dropdown_map.jpg" class='miniature'>
                <img src="images/USA/pont (2).jpg" id="images/USA/pont.jpg" class='miniature'>
                <img src="images/USA/statue (2).jpg" id="images/USA/statue.jpg" class='miniature'>
                <img src="images/USA/whitehouse (2).jpg" id="images/USA/whitehouse.jpg" class='miniature'><br />
                <img id="grand" src="images/USA/desert.jpg" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            </p>
            <p class='description' id="images/USA/desert.jpg">
                1111
            </p>
            <p class='description' id="images/USA/dropdown_map.jpg">
                2222
            </p>

.JS：

    $(function() {
    $('.miniature').css('border','5px white solid');
    $('.miniature:first').css('border','5px black solid');$(function() {
    $('.miniature').css('border','5px white solid');
    $('.miniature:first').css('border','5px black solid');
$('.miniature').click(function() {
      $('.miniature').css('border','5px white solid');
      $(this).css('border','5px black solid');
      var nom = $(this).attr('id'); // for the slideshow
      $('#grand').attr('src',nom); // for the slideshow
      $('p.description').attr('id', nom).show(); // For showing the text
    });

使用此代码，没有带有默认图片的文本。然后，当我点击一张图片时，所有块都会出现并停留。有人可以告诉我出了什么问题吗？

主要问题是这一行： 

$('p.description').attr('id', nom).show();

此行获取带有类"description"的所有段落，然后将其 id 设置为 nom，然后显示所有对象列表，在本例中是与p.description匹配的任何内容。

这是函数的jQuery链接。attr()函数不会为您过滤它。

另外，不幸的是，jQuery选择器中的"''"不好（见这里）。"." 用于选择类，因此它不会在名称中起作用。最后，您不希望在 DOM 中拥有相同 id 的倍数。

下面是一个示例，它在您的 id 名称中使用下划线并删除文件扩展名，并保持 id 的唯一性，从而实现我认为是您想要的效果：http://jsfiddle.net/sz9wep8f/1/

您将所有 p.description 元素的 id 设置为 nom。您希望改为获取该值。您可以将最后一行更改为如下所示： 

$('#' + nom).show();

添加第二个参数将设置第一个参数中定义的属性。省略第二个参数时，将获取该参数的值。

http://api.jquery.com/attr/

相关文章：