Question

我编写了一个函数，它在单击时非常简单地更改了图像的样式属性。

    document.getElementById("normal" + current).setAttribute('style', 'display: block;');

current是函数的参数。例如changeImage（10）我们想要改变样式的元素图像的结果id为“normal10”。

为了使它显示，基本上它被设置为display：none显然没有，我们需要将其更改为阻止。

所以，我有两个实例，我调用方法changeImage（current）。

一个是：

    <a href="#" onclick="changeImage(10);"><img src="xyz"></img></a>

和另一个是：

    <a href="javascript: changeImage(10);"><img src="xyz"></img></a>

这两项功能在Chrome＆amp; Opera，显示属性两次都会改变。

然而，在任何其他浏览器（如IE或Firefox）上，display属性似乎只会在我们拥有

的地方发生变化

    <a href="javascript...">

而不是通过onclick调用方法的位置。我试图改为：

    document.getElementById("normal" + current).style.display="block";

不幸的是无济于事。

我不认为javascript本身存在问题。因为在href中调用函数时执行正常。

有人有什么想法吗？

谢谢！

编辑：用jQuery完成，代码执行但图像的样式仍然没有改变。适用于Chrome＆amp;歌剧仍在但不在火狐和IE。

我给了点击的图像以执行id为“img”的函数。

    <img id="img" src="..."></img>

并且执行该函数的代码放在以下标记中（在文档就绪函数中）：

    $('#img').click(function(){}

执行代码，但样式仅在特定浏览器上从无更改为阻止。

Answer 1

因为您要求使用jQuery解决方案。这是一个：

<style>
  /* hide all elements with id starting by normal... */
  [id^=normal] { display: none; }
</style>

<!-- place the http protocol if you are on localhost -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script>

<script>
   $(document).ready(function () {         // when page is fully loaded

     // define a click event for any
     // anchor with a class "shownormal" and attribute "data-id" defined
     $("a.shownormal[data-id]").click(function (event) {
         $("#normal" + $(this).attr('data-id')).show();
         event.preventDefault();
     });

   });
</script>

，您的标记可以是

<a href="#" class="shownormal" data-id="10"><img src="xyz"></img></a>

<a href="#" class="shownormal" data-id="15"><img src="xyz"></img></a>

jsFiddle上的示例 with jQuery 和 without jQuery

<强> http://jquery.com/

Answer 2

尝试使用它，

$("#normal"+current).css("display","block")

的onclick =＆＃34;（）的函数＆＃34;不工作，但href =＆＃34; javascript：function（）＆＃34;工作良好？

2 个答案: