jquery和用户城市

起初，抱歉我的英语。我的问题是：我有PHP生成的动态股利，与ID和图像源..如果用户点击动态股利其交换IMG源。我的脚本工作，但它交换所有div图像，但没有选择div img源码。问题在哪里？我如何交换点击div img源码？有人能帮助我吗？jquery和用户城市

我的脚本：

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

来源

2010-09-22 Nation

And div：

– Nation 2010-09-22 08:33:34

使用

$(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"); 
     }); 
    });

还可以编辑CSS的div.area_map

div.area_map{ 
position:relative; 
}

这会让你的z-index的工作相对于area_map

来源

2010-09-22 08:45:41

你能给我你的电子邮件吗？我想发送完整的源代码给你。 – Nation 2010-09-22 09:02:08

只需在http://jsfiddle.net/中添加代码，点击保存并在这里更新网址 – 2010-09-22 09:10:34

我不能把php，只是html，java和css – Nation 2010-09-22 09:25:07

要澄清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而不是虚线名称。

来源

2010-09-22 09:07:31 ssokolow

Tnx，它的工作。但是Z指数有问题。Swaped D5。png在grass.png下？ – Nation 2010-09-22 09:13:53

在DOM Inspector（Chrome内置或Firefox扩展）中将其拉起来，并查看两个图像的“计算样式”列表中的z-index值。这会告诉你问题在哪里。 – ssokolow 2010-09-22 09:30:45

Okey，tnx。我会尝试。 – Nation 2010-09-22 09:34:48

jquery和用户城市

回答

相关问题