Question

请看这个示例代码：

<a class="change" href="#" id="swap01"><img src="off.gif"></a></div>
<a class="change" href="#" id="swap02"><img src="off.gif"></a></div>
<a class="change" href="#" id="swap03"><img src="off.gif"></a></div>

<form>
<input type="hidden" name="field01" value="0" />
<input type="hidden" name="field02" value="0" />
<input type="hidden" name="field03" value="0" />
</form>

我想要发生的是，例如，如果我点击 swap02 中的图片链接：

1）该链接的图像源从 off.gif 更改为 on.gif
2）表单中的相应隐藏字段（ field02 ）从 0 更改为 1 。

当我再次点击相同的链接时，它会恢复为 off.gif 和 0 。

仅举三个例子，但这需要可扩展（最多99个项目）。

非常感谢。：）

Answer 1

这似乎有效：

var i,$h
$('a img').click(
    function(){
        i = $(this).index('a img');
        $h = $('input:hidden').eq(i);

        if ($h.val() == 0){
            this.src = 'on.gif';
            $h.val(1);
        }
        else {
            this.src = 'off.gif';
            $h.val(0);
        }
    });

JS Fiddle demo

修改了代码，也改变了src。我在第一次忘记了这一部分......

Answer 2

这将遍历所有图像并应用单击事件，该事件将切换图像并根据图像'当前src将值设置为相关值。

  for(var I=1;I<99;I++){
        $('swap'+(I.toString().length == 1 ? '0' : '') + I).click(function(){
             var on = 0;
              if($(this).attr('src') == 'on.gif'){
                    on = 1;
                    $(this).attr('src','off.gif');
               }else{
                     $(this).attr('src','on.gif');
                }
                $('field'+(I.toString().length == 1 ? '0' : '') + I).val(I.toString());
          });
 }

Answer 3

尝试 -

$("a[id^='swap']").click(function(e) {
    e.preventDefault();
    var $img = $("img",this);
    $img.attr("src") == 'off.gif' ? $img.attr("src","on.gif") : $img.attr("src","off.gif");
    var $hf = $("input[name='field" + this.id.replace('swap','') + "']");
    $hf.val() == '1' ? $hf.val('0') : $hf.val('1');
})

演示 - http://jsfiddle.net/dwE78/

Answer 4

This就是我如何做到的。

一些注意事项：

我正在使用<div>因为使用锚点是一种不好的味道纯粹的客户端操作。这往往会导致IE中出现问题窗口卸载事件。
我在你的乞丐周围移动了表格，因为它似乎应该捆绑在一起。如果由于某种原因你不能使用它，然后你必须解析div中的id号，然后查找输入。
使用类而不是更改元素属性。

=============================================== ============================

编辑：关于div和背景......
如果你想构建一个类似自定义按钮的控件，那么你应该坚持使用div。为什么？因为div是你可以获得的最基本和最轻量级的构建块。它没有附带一些怪异的预定义（和浏览器不一致）外观和行为规则，您很可能不需要也不必担心。

例如，有时候<img src="..." />会显示没有边框，有时你需要给它border=0。使用img标签的唯一原因是如果你想要拉伸你的图像。使用div与背景图像的主要优点：

它可以通过类名来自js操作，这是更清晰的代码。
它可以与图像精灵一起使用（如我的例子所示）
不会突然出现2个像素新版IE的好理由。

与锚标签相同。人们使用它们是因为他们曾经认为<a href="...">...</a>是可点击的东西，但它实际上伴随着你不想要的一大堆行为。只需cursor:pointer; CSS即可轻松模拟整个“可点击”。事实上，我的CSS文件中声明了一个主要.clickable {cursor:pointer;}（很像.hidden {display:none;}）。这种方法非常棒，它可以用来同时控制外观和逻辑，如here

简而言之，如果您要构建自定义控件，请始终坚持使用div。它们易于定义，一致，轻量且易于使用js代码。更多问题：如果你需要一个图像而不是另一个图像，只需用背景图像制作2个div。

Answer 5

$(function(){

    $('body').delegate('a', 'click', function(event) {
        event.preventDefault();  
        var $this = $(this);
        var $img = $('img', $this);
        var $hidden = $('input[name$="' + $this.attr('id').slice(-2) + '"]');

        // toggle img src
        $img.attr('src', function(i, attr) {
            return (attr == 'on.gif') ? 'off.gif' : 'on.gif';
        });

        // change hidden value
        $hidden.val(function(i, attr) {
            return (attr == '0') ? 1 : 0;
        });
    })

});

根据您的需要更改委托目标选择器（在我的示例中，'body'中的'a'元素）。

修改

当页面上可能有许多事件处理程序时，首选使用委托。 99并不是一个庞大的数字，但它可能足以开始担心性能。

简单的切换查询

5 个答案: