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

Toggle an image with input style hidden using jQuery Mobile Flip Switch on the same page

本文关键字：隐藏 输入 图像 样式 Switch Flip 一页 Mobile jQuery      更新时间：2023-12-01

详细信息：我需要切换一个图像，即当翻转开关打开时，它会显示图像，如果值关闭，它会隐藏图像。代码在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函数在执行触发器事件时甚至不需要单击开关。

您有几个问题。

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

如果您使用的是jQM1.4.x，您可以使用enhanceWithin（）而不是触发器（"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');
});

这是演示

相关文章：