Pertanyaan Bagaimana cara mendapatkan nama kontrol UI yang memulai acara?


Saya memiliki kode berikut yang mengimplementasikan 2 slider jQuery:

<script type="text/javascript">
    $(document).ready(function () {
        $("#wheelLeft").slider({ value: 50, min: -100, max: 100, slide: handleSlide });
        $("#wheelRight").slider({ value: -10, min: -100, max: 100, slide: handleSlide });
    });

    function handleSlide(event, ui) {
        $("#lblInfo").text(ui.id + ':' + ui.value);
    }
</script>

Seperti yang Anda lihat, kedua slider menghasilkan slide event yang ditangani oleh handleSlide fungsi. Di dalam handleSlide berfungsi, saya bisa mendapatkan nilai slider dengan memanggil ui.value, tapi bagaimana saya tahu slider mana yang benar-benar menghasilkan acara?

Saya sudah mencoba ui.id, ui.name dan beberapa lainnya yang sepertinya logis, tetapi semuanya kembali tidak terdefinisi. Bagaimana cara mendapatkan nama sebenarnya dari implementasi CSS-nya (mis. Baik #wheelRight atau #wheelLeft)?

Terima kasih.


4
2018-01-31 22:47


asal


Jawaban:


Coba membungkus ui.handle

function handleSlide(event, ui) {
  $("#lblInfo").text( $(ui.handle).attr("id") + ':' + ui.value);
}

Edit: Ups, yang mengembalikan elemen "a". Ini harus mengembalikan id elemen induk:

$(ui.handle).parent().attr('id')

5
2018-01-31 22:59



Anda dapat mengirimkan pemilih id (atau argumen apa pun pilihan Anda) langsung ke fungsi handler Anda:

$(document).ready(function () {
    $("#wheelLeft").slider({
        value: 50, min: -100, max: 100,
        slide: function(event, ui) {
            handleSlide(event, ui, "#wheelLeft");
        }
    });
    $("#wheelRight").slider({
        value: -10, min: -100, max: 100,
        slide: function(event, ui) {
            handleSlide(event, ui, "#wheelRight");
        }
    });
});

function handleSlide(event, ui, idSelector)
{
    $("#lblInfo").text(idSelector);
}

1
2018-01-31 23:02



function handleSlide(event, ui) {
    var sender = event.srcElement || event.target;
     $("#lblInfo").text(ui.id + ':' + ui.value);
}

Itu sender harus mengandung elemen mentah yang memicu peristiwa tersebut.


0
2018-01-31 22:52