javascript - 在同一页面上使用 jQuery Mobile Flip Switch 切换具有隐藏输入样式的图像

Question

详细信息：我需要切换图像，即当翻转开关打开时，它会显示图像，并在值关闭时隐藏它。代码在一个 JS 文件中。

$("#dashboard").append('<form><img src="../images/GREEN.png" style="display: none;" id="greenimage">Toggle Image<select id="flip" name="flip-select" data-role="flipswitch">'+
                    '<option>Off</option>'+
                    '<option>On</option>'+
                    '</select>'+
                '</img></form>');

$("#dashboard").trigger("create");          

                $('#flip').click(function() 
                        {

                            $("#yellowim").toggle('slow');
                        });

在代码中放置检查点表明 CLICK 函数在触发事件的情况下执行，甚至无需单击开关。

Answer 1

你有几个问题。

首先，IMG 标签应该在 SELECT 之前关闭。其次，您分配给图像的 ID 是“greenimage”，但您正在尝试切换“yellowim”。第三，当您动态添加选择时，您应该使用事件委托来绑定事件。最后，在选择时，您使用更改事件而不是单击事件。

如果您使用的是 jQM 1.4.x，则可以使用 enhanceWithin() 而不是 trigger("create")。

$("#dashboard").append('<form><img src="http://lorempixel.com/32/32/nature/1/" style="display: none;" id="greenimage" />Toggle Image<select id="flip" name="flip-select" data-role="flipswitch">' +
    '<option>Off</option>' +
    '<option>On</option>' +
    '</select>' +
    '</form>').enhanceWithin();

$("#dashboard").on("change", '#flip', function () {
    $("#greenimage").toggle('slow');
});

这是一个演示