JavaScript ile dinamik olay işleyicileri nasıl değiştirilir?

0 Cevap php

Ben bir şey AJAX için oldukça yeni ve aşağıdaki sorun koştu. Ben burada birisi bana yardım edebilir umuyoruz. Ben kolay bir düzeltme olduğuna eminim ama ben sadece görmüyorum: (

Ne yapmaya çalışıyorum onMouseOver değiştirmek ve olayları onmouseout dinamik elemanı için, burada kod ilgili bit şunlardır:

HTML Eleman (bu birden var fark, dolayısıyla onların id dinamik parçası)

<?
if (ownsgame($id, $userid)) {?>
    <a><img src="images/collection/got.gif" id="ownedimage<?=$id?>" title="<?=$itemtitle?> (<?=$platformdisplay?>) is in your collection" alt="You own this game" align="center" width="62" height="22" onclick="changeOwned('<?=$id?>')" onmouseover="changeImageSrc('ownedimage<?=$id?>', 'images/collection/del.gif')" onmouseout="changeImageSrc('ownedimage<?=$id?>', 'images/collection/got.gif')"/></a>
<? } else { ?>
    <a><img src="images/collection/add.gif" id="ownedimage<?=$id?>" title="Add <?=$itemtitle?> (<?=$platformdisplay?>) to your collection" alt="You do not own this game" align="center" width="62" height="22" onclick="changeOwned('<?=$id?>')" onmouseover="changeImageSrc('ownedimage<?=$id?>', 'images/collection/add.gif')" onmouseout="changeImageSrc('ownedimage<?=$id?>', 'images/collection/add.gif')"/></a>
<?} ?>

JavaScript işlevi:

function changeImageSrc(id, src) {
    document.getElementById(id).src = src;
}

(Ilgili) AJAX kodu:

var http = createRequestObject();
var jsid = "";

function changeOwned(id) {
    http.open('get', 'changeowned.php?id=' + id + '&user=<?=$userid?>');
    jsid = id;
    http.onreadystatechange = processResponse;
    http.send(null);
}

function processResponse() {
if((http.readyState == 4) && (http.status == 200)){

    var response = http.responseText;
    var elementid = 'ownedimage' + jsid;
    var element = document.getElementById(elementid);
    if (response == "1") {
        image = "images/collection/got.gif";
        alt = "you own this game";
        mouseoverstr = 'images/collection/del.gif';
        mouseoutstr = 'images/collection/got.gif';
        element.removeEventListener('mouseout', function(){changeImageSrc('ownedimage' + jsid, 'images/collection/add.gif')}, false);
        element.removeEventListener('mouseover', function(){changeImageSrc('ownedimage' + jsid, 'images/collection/add.gif')}, false);
    } else {
        image = "images/collection/add.gif";
        alt = "add this game to your collection";
        mouseoverstr = 'images/collection/add.gif';
        mouseoutstr = 'images/collection/add.gif';
        element.removeEventListener('mouseout', function(){changeImageSrc('ownedimage' + jsid, 'images/collection/got.gif')}, false);
        element.removeEventListener('mouseover', function(){changeImageSrc('ownedimage' + jsid, 'images/collection/del.gif')}, false);
    }
    element.src = image;
    element.alt = alt;
    element.addEventListener('mouseover', function(){changeImageSrc('ownedimage' + jsid, mouseoverstr)}, false);
    element.addEventListener('mouseout', function(){changeImageSrc('ownedimage' + jsid, mouseoutstr)}, false);
}
}

İlk başta ince iş gibi görünüyor ama bazı garip davranış üretir. Başvurulan PHP çalışıyor ve doğru yanıtı üretir. Görüntünün srcand alt de değişti. Aslında, ilk çok yeni mouseover / çıkış iş gibi görünüyor. Ancak (farklı kimlikleri vardır) sitede birden fazla resme tıkladıklarında onlar aniden birbirlerini etkileyen başlar. Eğer birinin üzerine mouseover zaman, diğer imajını aswell değiştirir. Bu neden oluyor? Jsid kısmı ince olarak gerçekten clueless ve mouseover aniden iki görüntü değişikliği neden anlamıyorum. Farklı kimlikleri için birden EventHandlers aynı görüntü elemana atanmış gibi görünüyor. Bu olsa neden hiçbir fikrim yok. (: Ben daha çok AJAX bilgi ile sizin bazı oldukça sinirli, burada bana yardımcı olabilir umuyoruz

0 Cevap