Lỗi không chạy sự kiện js slider

Tu_Vo · April 12, 2021, 9:50am

Xin chào các bạn,

Mình đang gặp vấn đề trong việc bắt sự kiện js này mong các bạn có thể giải đáp giúp mình. Mình đang bắt sự kiện là cái slick có id mà khi nó có class active thì cái contetn có id tương ứng nó chạy lên. Mà chả hiểu sao nó không chạy hàm cũng không báo lỗi gì. Các bạn thông não mình với mình cảm ơn rất nhiều.

HTML:

 <div class="demo">
<div id="slider1" class="slider_item">
<div class="khungAnh img_slider img_slider_moblie"></div> 
</div>
<div id="slider2" class="slider_item">
<div class="khungAnh img_slider img_slider_moblie"></div> 
</div>
<div id="slider3" class="slider_item">
<div class="khungAnh img_slider img_slider_moblie"></div>
</div>
 </div>

<!--box_black-->
        <div class="box_main ">
            <div class="list_box container-xl">
                <div class="box">
                    <h1 class="box_heading">About Us</h1>
                    <div class="panel" id="panel1">
                        <a class="button_get">find out more</a>
                    </div>
                </div>
                <div class="box">
                    <h1 class="box_heading">Find a plant</h1>
                    <div class="panel" id="panel2">
                        <a class="button_get">find out more</a>
                    </div>
                </div>
                <div class="box">
                    <h1 class="box_heading">Gift Cards</h1>
                    <div class="panel" id="panel3">
                        <a class="button_get">find out more</a>
                    </div>
                </div>
            </div>
        </div>

JS:

$(document).ready(function() {
    if ($('#slider1').hasClass('slick-active')) {
        $('#panel1').slideDown();
    } else {
        $('#panel1').slideUp();
    }
    if ($('#slider2').hasClass('slick-active')) {
        $('#panel2').slideDown();
    } else {
        $('#panel2').slideUp();
    }
    if ($('#slider3').hasClass('slick-active')) {
        $('#panel3').slideDown();
    } else {
        $('#panel3').slideUp();
    }
});

kisuluoibieng · April 12, 2021, 9:37am

trong những gì bạn show ra mình chưa thấy có gì gọi là event ở đây cả
code không đủ thì chả có gì để giúp cả

SITUVN.gcd · April 12, 2021, 9:49am

Mếu bạn muốn xử lý khi thêm/bớt class vào thì panel sẽ thay đổi tùy vào thao tác thêm/bớt, vậy thì bạn gọi trực tiếp (slideUp/slideDown) ngay khi thêm/bớt luôn cho xong.
Còn đoạn bên trên bạn chỉ xử lý ngay khi trang tải xong, mà trong các slider đâu có chỗ nào là có slick-active đâu.

Dùng CSS xử lý còn ngon hơn.

Tu_Vo · April 12, 2021, 9:50am

xin lỗi bạn mình copy code vào mà khi đăng nó lại mất bớt

Tu_Vo · April 12, 2021, 9:53am

mình vẫn chưa hiểu ý bạn lắm bạn có thể nói rõ thêm tí đc ko ạ. Mình cảm ơn

SITUVN.gcd · April 12, 2021, 9:57am

Đoạn JS mà bạn thêm class slick-active đâu?

Tu_Vo · April 12, 2021, 10:01am

ak cái đó là mình xài thư viện slick đó bạn. khi mà nó chuyển tới slide đó thì nó thêm cái class slick-active zo. Nên mình đang viết hàm khi nó chuyển tới slide đó thì dựa vào điều kiện class slick-active để thực hiện câu lệnh

SITUVN.gcd · April 12, 2021, 10:07am

Vấn đề là bạn không bắt sự kiện khi slick kích hoạt mục đó.
Có thể slick có hỗ trợ để bắt sự kiện này luôn, mình không rõ.

Nếu không có thì phải dùng đến các lớp Quan sát (Obverser) các thẻ của DOM.

Tu_Vo · April 12, 2021, 10:14am

. Để mình tìm hiểu thêm, cảm ơn bạn đã dành thời gian cho mình.