Question

我正在尝试创建一个按钮或文本，我可以点击它来切换图像以显示地图。如：

JavaScript的：

 $('.buttontest').click(function () {
     $(this).parent().find('img.locationMap').toggle('slow');
 }); // End of $('.buttontest').click(function()

HTML代码

 <div id="location">
     <button class="buttonTest" value="Show/Hide 1">
     <img src="graphics/locationMap.png" id="location" />
 </div>

我似乎无法让这个工作。它只是将图像显示为按钮，但单击它时不会返回错误或任何内容。

Answer 1

您的按钮具有类buttonTest但javascript引用为.buttonTest且带有大写字母T. Javascript区分大小写，因此它不会挂钩您的点击事件处理程序。

此外，您的图片没有类locationMap，因此也无法匹配。

最后，您有2个id="location"元素，这些元素无效。您需要更改或删除其中一个的ID。有些HTML是错误的。

请改为尝试：

 $('.buttonTest').click(function() 
 {
     $(this).parent().find('img').toggle('slow');
 });


 <div id="location">
     <button class="buttonTest">Show/Hide 1</button>
     <img src="graphics/locationMap.png" />
 </div>

Answer 2

您的HTML无效。你没有关闭按钮标签。这应该有帮助

＆＃13;

$('.buttontest').click(function(){
        $(this).parent().find('img').toggle('slow');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="location">
    <button class="buttonTest">Show/Hide 1</button>
    <img src="graphics/locationMap.png" id="location"/>
</div>

＆＃13;

如何使用jQuery创建按钮或文本以显示图像

2 个答案: