Question

我目前正在制作某种幻灯片..它只是一个平面图，所以它看起来不应该整洁。我正在使用链接号来指定楼层。单击其中一个链接时，将显示相应的楼层图像。

在我目前拥有的代码下面..但是图片的src在点击时不会改变。我做错了什么？

谢谢！

        <div id="bovengedeelte">
        <img src="image1.png" id="plattegrond" width="300" height="300" alt="plattegrond" />
        </div>

        <div id="ondergedeelte">
        <script type="text/javascript">
        $("a.floor0").click(function(event){
          $("img.plattegrond").attr("src","floor0.png");
        });
            $("a.floor1").click(function(event){
          $("img.plattegrond").attr("src","floor1.png");
        });     
            $("a.floor2").click(function(event){
          $("img.plattegrond").attr("src","floor2.png");
        });     
        $("a.floor3").click(function(event){
          $("img.plattegrond").attr("src","floor3.png");
        });         
        $("a.floor4").click(function(event){
          $("img.plattegrond").attr("src","floor4.png");
        });         
        $("a.floor5").click(function(event){
          $("img.plattegrond").attr("src","floor5.png");
        });         </script>
        <p>Kies een verdieping</p>
        <a id="floor0" href="#">0</a><a id="floor1" href="#">1</a><a id="floor2" href="#">2</a><a id="floor3" href="#">3</a><a id="floor4" href="#">4</a><a id="floor5" href="#">5</a>
        </div>

**给大家：在你所有的解决方案之后，它仍然没有工作。谢谢！有人可以检查整个代码，看看我做错了什么？：■

http://prototyping.iscs.nl/

**

Answer 1

所有你需要的是：

<强> Fiddle demo

    <div id="bovengedeelte">
          <img src="image1.png" id="plattegrond" width="300" height="300" alt="plattegrond" />
    </div>

    <div id="ondergedeelte">

        <p>Kies een verdieping</p>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>

    </div>

JQ：

$(function(){ // document ready shorthand

    $('#ondergedeelte a').click(function( e ){
         e.preventDefault();
         var newImgUrl = 'floor'+ $(this).text() +'.png' ;
         $('#plattegrond').attr('src', newImgUrl );
    });

});

Answer 2

因此，您没有使用a而不是class正确搜索id。这将有效：

$("a#floor5").click(function(event) {
    $("img#plattegrond").attr("src","floor5.png");
});

@Jay Blanchard在评论中是完全正确的。

此外，调试并查看是否找到正确元素的一种好方法是使用jQuery对象执行console.log，如果它确实打印出您正在查找的元素console.log($("a#floor5"));因为，你可以继续。

Answer 3

因为您在jQuery选择器中使用了一个类而不是id。另外，你可以缩短你的jQuery代码 -

$('a').click(function(e) {
    e.preventDefault();
    var thisNumber = id.substr(id.length - 1);
    $('img#plattergrond').attr('src', 'floor' + thisNumber + '.png');
});

现在无论添加多少链接或图像，都可以正确处理。

点击链接更改SRC ..我做错了什么？

3 个答案: