1

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

在我目前拥有的代码下方..但图像的 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/

**

4

3 回答 3

2

你只需要这样：

小提琴演示

    <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>

问：

$(function(){ // document ready shorthand

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

});
于 2012-11-23T13:59:29.443 回答
1

因为您在 jQuery 选择器中使用类而不是 id。此外，您可以像这样缩短您的 jQuery 代码 -

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

现在，无论添加多少链接或图像，它们都将得到正确处理。

于 2012-11-23T13:56:33.670 回答
1

因此，您没有正确搜索awithclass而不是您拥有的id. 这将起作用：

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

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

此外，调试并查看是否找到正确元素的一个好方法是console.log使用 jQuery 对象，如下所示：console.log($("a#floor5"));如果它打印出您正在寻找的元素，那么您可以继续。

于 2012-11-23T13:54:32.247 回答