jQuery Css Sınıf corectly girilmedi

2 Cevap php

Ben bir grafik tıklayarak önemli bir öğeyi işaretlemek için edememek, oynadığı bir sistem akin gmail uygulamak çalışıyorum.

if($starred == 1){
        $starred = '<img class="starred" id="row_'.$trouble_ticket_id.'" src="images/icons/silk/award_star_gold_3.png" alt="Star">';
    }
    else{
        $starred = '<img class="unstarred" id="row_'.$trouble_ticket_id.'" src="images/no_star.png" alt="No Star">';
    }

$content.= '<td><a href="ticketEdit.php?id='.$trouble_ticket_id.'"><img src="images/icon_edit.png" alt="Edit" /></a></td><td><a href="adminTicketDetail.php?id='.$trouble_ticket_id.'">'.$ticket_code.'</a></td><td>'.$requested_by.'</td><td>'.$department.'</td><td>'.$telephone.'</td><td>'.$room_number.'</td><td>'.$subject.'</td><td>'.$original_date_request.'</td><td style="text-align: center;">'.$starred.'</td>';


<script type="text/javascript">
    $(document).ready(function() {
        $("img.unstarred").click(function(){
            $(this).attr("src", "images/icons/silk/award_star_gold_3.png");
            $(this).attr("alt", "Starred");
            $(this).removeClass('unstarred').addClass('starred');
            $.get("star_it.php", { id: $(this).attr("id") } );
        });
        $("img.starred").click(function(){
            $(this).attr("src", "images/no_star.png");
            $(this).attr("alt", "Unstarred");
            $(this).removeClass('starred').addClass('unstarred');
            $.get("star_it.php", { id: $(this).attr("id") } );
        });
                 }); 
    }); 
</script>';

Eğer ona bağlı URL değişkeni tıklanan elemanın kimliği karşılık gelen star_it.php bir ajax isteği göndermek resmin üzerine tıklayarak görebilirsiniz.

Bu ilk tıklama üzerinde çalışıyor, bu jQuery kullanarak görüntüyü, ALT metni ve sınıfını değiştirir. Ancak, ardışık tıklama üzerine, bu orijinal yolu hala alınır gibi görünüyor.

Görüntü ilk tıklandıktan sonra oynadı eğer öyleyse, jQuery (en azından web sayfasında) öğeye yıldız devam edecektir. Ben bu olay aslında olduğunu belirlemek için Firebug kullandık. İlk çalıştırmada bu yıldız işaretli olmayan bir starred görüntüyü değiştirmek ve veritabanında değişiklik yapacak. Ikinci tıklama ve daha fazla tıklamaları, hala $ ("img.unstarred") geçer. Bunun img.starred fonksiyonu geçiyor ve yıldızı kaldırıldı görüntüyü işaretleme edilmelidir zaman (function ()) tıklayınız.

Ben kaldırma ve css sınıfları ekleyerek tüm bu yapmak. Yıldızlı bir img tıklandığında i canlandırdı css sınıfını kaldırmak ve yıldızı kaldırıldı css sınıf ekleyin. Ancak, bu çalışma gibi görünmüyor. Dinamik oluşturulan çünkü gerçekten onClick için img kimliğini kullanamazsınız.

Herhangi bir fikir?

2 Cevap

Bir işlevi de aşağı pekiştirmek ve yerine bir görüntü farklı kaynaklardan atama daha div en doğru arka plan görüntüsü vermek için css kullanmak. Css verir gücünü kullanın.

<style>
.unstarred{
    background: url(images/no_star.png);
}
.starred{
    background: url(images/icons/silk/award_star_gold_3.png);
}
</style>

<div class="star unstarred" />

Lütfen star_it.php kendisine gönderilen kimliği dayalı geçiş için kendi bilir beri javascript sadece bu o zaman olurdu.

$(document).ready(function() {
    $("div.star").click(function(){
        $(this).toggleClass('unstarred').toggleClass('starred');
        $.get("star_it.php", { id: $(this).attr("id") } );
    });
});

Henüz var olmayan bir öğe için bir işlev uygulamaktayız. Daha iyi bir yolu geçerli durumuna göre 2 fonksiyonları ve "toggle" birleştirmek olacaktır.

$("img.star").click(function(){
// get the value
var starred = $(this).attr("alt");
if (starred == 'unstarred') // star it
{
            $(this).attr("src", "images/icons/silk/award_star_gold_3.png");
            $(this).attr("alt", "Starred");
            $(this).removeClass('unstarred').addClass('starred');
            $.get("star_it.php", { id: $(this).attr("id") } );
       } else { // unstar it
            $(this).attr("src", "images/no_star.png");
            $(this).attr("alt", "Unstarred");
            $(this).removeClass('starred').addClass('unstarred');
            $.get("star_it.php", { id: $(this).attr("id") } );
}
        });

Sen biraz-ama bu kadar temiz olabilir size fikir olsun.

etiketler