Question

我使用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
    });

使用此代码，没有带默认图片的文字。然后，当我点击图片时，所有块都会出现并停留。有人能告诉我什么是错的吗？

Answer 1

主要问题是这一行：

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

此行获取带有“描述”类的所有段落，然后将其ID设置为nom，然后显示所有对象列表，在这种情况下，它们是匹配p.description的任何内容。 / p>

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

另外，不幸的是，jQuery选择器中的'\'并不好（参见here）。 “”用于选择类，因此它不会在名称中工作。最后，您不希望在DOM中具有相同ID的倍数。

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

Answer 2

您将所有p.description元素的ID设置为nom。你想要获得价值。您可以将最后一行更改为以下内容：

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

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

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

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

2 个答案: