Question

起初，抱歉我的英语。我的问题是：我有php生成的动态div，带有id和图像源。如果用户点击动态div它的交换img源码。我的脚本工作，但它交换所有div图像，但没有选择div img源。哪里有问题？我如何交换点击的div img源？有人可以帮帮我吗？

我的剧本：

<script> ( function($) { 
  $(document).ready( function() { 
    $("div.area_map").click( function () { 
      $('div[id^=grass]').each(function(div) { 
        $('img.hoverswap').css("width","229"); 
        $('img.hoverswap').css("height","124");
        $('img.hoverswap').attr("src","default/citymap/D5.png"); 
        $('img.hoverswap').css("z-index", "9999") 
       } ); 
     }); 
   } ) ( jQuery ); 
</script>

和div：

<div class="area_map" id="grass
  <?php echo $k+$st_x/2; ?>" 
  style='cursor:pointer; width:118px; height:51px; position:absolute; 
  left:<?php echo $st_x; ?>px; 
  top:<?php echo $st_y; ?>px;'>
  <img src="default/citymap/Zale2.png" name="table" border="0" 
    usemap="#tableMap" class="hoverswap" 
    style='cursor:pointer; z-index:-300; width:118px; height:51px;'/> 
</div>

Answer 1

使用

$(document).ready( function() { $("div.area_map").click( function () { $('img.hoverswap') .css( { "width":"229", "height":"124", "position":"absolute",//to make z-index work "z-index", "9999" }) .attr("src","default/citymap/D5.png"); }); });

还为 div.area_map
编辑css
div.area_map{ position:relative; }

这将使您的z-index相对于area_map
工作

Answer 2

为了澄清JapanPro和zrytane给出的答案，$('img.hoverswap')查找文档中的所有匹配项，无论您将其称为何种范围。

$('img.hoverswap', this)将范围限制为this，而不是默认的document。

$(this).find('img.hoverswap')为this设置jQuery包装器，然后在其中进行搜索。

两者同样运作良好，但你必须自己对它们进行基准测试，看看是否存在速度差异。（直观地说，不应该）

但是，由于您反复创建和丢弃jQuery对象，因此您的脚本效率很低。这是我编码的方式：

<script>
 (function($) { 
  $(document).ready( function() { 
    $("div.area_map").click( function () { 
        $('img.hoverswap', this).css({
            width: "229",
            height: "124",
            zIndex: "9999"
        }).attr("src","default/citymap/D5.png"); 
    }); 
  }); 
 }) ( jQuery ); 
</script>

这样，你只需要为img.hoverswap查询创建一次包装然后发送多个命令。您还会注意到我使用了.css（）的地图形式，由于Javascript对象文字的限制，它使用了camelCase而不是虚线名称。

jquery和用户城市

2 个答案: