Question

我正在开发一个应用程序，允许通过单击和图像以及通过拖放来选择票证。我希望能够动态选择id "id": "A" + (i+1)导致A1等等＆lt; - 这是应用ID的方式，我希望能够选择与单击的id匹配的id，丢弃或删除。已使用以下方法插入图像：

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

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

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但是无法使用最后一行恢复附加功能。我还需要能够通过他们的身份而不是通过班级来选择他们。

感谢您阅读所有这些btw！

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>

jQuery - 一旦附加了动态ID，就选择它

1 个答案: