jQuery - 附加后选择动态 ID

Question

我正在开发一个应用程序，该应用程序允许通过单击和图像以及拖放来选择票证。我希望能够动态选择 ID 的 "id": "A" + (i+1) 导致 A1 等

$(window).load(function(){
td = $('#A .AS');
td.each(function (i) {
    var img = $("<img ondragstart='dragStart(event)' ondragend='dragEnd(event)'  onclick='sold(this.id)' onmouseover='over(this.id)' onmouseout='out(this.id)'/>");
    img.attr({
        "id": "A" + (i+1),
        "class": "clicks",
            "src": "images/available.gif",
            "alt": "available" + i,
            "style": "border:none",
            "title": "available",
            "draggable": "true",

    });
    $(this).append(img);
});
});

如您所见，它们添加了唯一的 id 和其他属性，例如 mouseover 和 onclick 事件。

点击图片并将其添加到购物车后，我已禁用所有附加事件。但是，对于拖放或取消功能，我似乎无法使用相同的方法专门选择图像的 id。基本上我希望能够通过它的 id 选择图像，以便我可以恢复禁用的事件，并在从购物车中删除图像时重置事件和图像 src。图片本身并没有附加到购物车，而是显示在购物车中的动态 id。

function sold(img){
var mysrc='images/'+$(img).attr('alt');

if($(img).attr('onmouseover')==""){
$(img).attr('src',mysrc).attr('onmouseover','over(this)').attr('onmouseout','out(this)').attr('title',mytitle);

} else {
$("#"+img).attr('src','images/mine.gif');
$("#"+img).attr('onmouseover','').attr('onmouseout','');
$("#"+img).attr('onclick','');
$("#"+img).attr('title','Mine');

$("#mybillets").append("<span onclick='remove(this)' draggable='true' ondragstart='draggy(event)' ondragend='remove(this)' style='cursor:pointer;'>"+img+" </span>");

    $("#myprice").show();
}
}

我也使用了拖放方法，这导致了同样的问题。将 src 设置为 mine.png 图像时，我无法选择适当的图像 ID。我的代码如下：

function dragStart(img) {   
img.dataTransfer.setData('Text/html', img.target.id); 
//alert(img.target.id);   
}


function drop(img) {
img.preventDefault();
var data = img.dataTransfer.getData("text/html");

$("#mybillets").append("<span class='empt' onclick='remove(this)' draggable='true' ondragstart='draggy(event)' ondragend='remove(this)' style='cursor:pointer;'>"+data+" </span>"); 

    $("#myprice").show();
}

最后，这是我用来取消所有选定门票的功能。我假设如果我可以在这些函数中的任何一个中选择图像的 id，我将能够很容易地将其应用于所有函数。请原谅我这篇文章的长度，我在这里超出了我的深度，非常感谢任何帮助！

function cancel(img){
$('#mybillets').empty();
$("#myprice").hide();
$('.clicks').attr('src','images/available.gif');
$('.clicks').attr('src',mysrc).attr('onmouseover','over(this)').attr('onmouseout','out(this)').attr('title',mytitle);
}

注意：上面我使用一个类将所有图像重置为其原始 src，但无法恢复最后一行的附加功能。我还需要能够通过它们的 id 而不是类来选择它们。

感谢您阅读所有这些内容！

Answer 1

试试这个：

<script>

    $(document).ready(function() {
        function ds(){
            alert("ds");
        }
        function de(){
            alert("de");
        }
        function ck(){
            alert("ck");
        }
        function mout(){
            alert("mout");
        }
        function mover(){
            alert("mover");
        }

        td = $('#A .AS');
        td.each(function (i) {
            var img = $("<img/>");
            img.attr({
                "id": "A" + (i+1),
                "class": "clicks",
                "src": "images/available.gif",
                "alt": "available" + i,
                "style": "border:none",
                "title": "available",
                "draggable": "true",

            });

            img.bind("dragstart", ds);
            img.bind("dragend", de);
            img.bind("click", ck);
            img.bind("mouseover", mover);
            img.bind("mouseout", mout);

            $(this).append(img);

        });    

    });

</script>