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

-1

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

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

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

来源

2014-12-07 Taylor Mack

@JánosWeisz格式和缩进代码是伟大的，使其更具可读性，但请不要改变结构，即固定'img'标签。这可以打破这个问题。 – Rhumborl 2014-12-07 17:14:56

您的按钮拥有类buttonTest，但javascript引用为.buttonTest，大写字母为T. Javascript区分大小写，因此它不会连接您的Click事件处理程序。

此外，您的图像没有类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>

来源

2014-12-07 17:11:49 Rhumborl

这很好用！但是有没有办法让页面加载时不会马上显示图片？所以它只显示按钮，然后当你点击你可以显示图像。 – 2014-12-07 17:18:33

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

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

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

来源

2014-12-07 17:12:00 MH2K9

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

回答

相关问题