jQuery eng yaqin elementga sinf qo'shish

.next() , .closest() .parent() bilan harakat qildim.

Mana mening HTML formatlashim:

<div id="arrownav1" class="ct_as_arrow_nav ">
    <div class="ct_amy_arrows_next">
        
    </div>
    <div class="ct_amy_arrows_prev">
        
    </div>
</div>

O'ng o'qni birinchi marta bosganidan so'ng chap o'q ko'rsatmoqchiman.

Men uni quyidagicha yashiraman:

jQuery('.ct_amy_arrows_prev').removeClass("prev_show");

Keyin uni quyidagicha ko'rsataman:

jQuery('.ct_amy_arrows_prev').addClass("prev_show");

Bu ishlaydi, lekin birinchi kaydırıcıda bir sahifada ushbu slayderdan bir nechta misol bor ekan, barcha kaydırıcılarda barcha chap o'qlarni faollashtiradi.

Shunday ekan, men eng yaqin elementni faollashtirib, unga pre_show sinfini qo'shish uchun yo'l kerak. Men noto'g'ri ish qilyapman?

Barcha nav kodi:

//Navigation
//==================================================
function initButtons() {
  jQuery('#arrownav' + sliderID + ' .next-arrow').click(function() {
    gonext();
  });
  jQuery('#arrownav' + sliderID + ' .prev-arrow').click(function() {
    goprev();
  });
}
var stopnextslide = 0;

function gonext() {
  var stopnextslide = 0;
  var n = jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').length;

  jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').each(function() {
    if (jQuery(this).hasClass('bespoke-active') && Number(jQuery(this).attr('rel')) + 3 == n) {
      deck.slide(0);
      stopnextslide = 1;
    }
  });
  if (stopnextslide != 1) {
    jQuery(this).closest(".ct_as_arrow_nav").find(".ct_amy_arrows_prev").addClass("prev_show");
    deck.next();
  }
};

function goprev() {
  var stopnextslide = 0;

  var n = jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').length;

  jQuery('#ct_as_amy_sliderid' + sliderID + ' ct_amy_section').each(function() {
    if (jQuery(this).hasClass('bespoke-active') && Number(jQuery(this).attr('rel')) == 3) {

      deck.slide(n - 1);
      stopnextslide = 1;
    }
    if (jQuery(this).hasClass('bespoke-active') && Number(jQuery(this).attr('rel')) == 1) {

    }
  });
  if (stopnextslide != 1) {
    deck.prev();
  }
};

Rahmat

3
.Next-arrow ustiga bosing
qo'shib qo'ydi muallif Marc Sommerson, manba
.Next-arrow ustiga bosing
qo'shib qo'ydi muallif Marc Sommerson, manba
Siz qaysi elementni bosasiz?
qo'shib qo'ydi muallif ibrahim mahrir, manba

6 javoblar

You know the structure. Just navigate up to the parent then search for the previous button. No need to use expensive operations like closest

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('.ct_amy_arrows_next').on('click', function() {
  $(this).parent().find('.ct_amy_arrows_prev').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="arrownav1" class="ct_as_arrow_nav ">
    <div class="ct_amy_arrows_next">
        >
    </div>
    <div class="ct_amy_arrows_prev" style="display: none;">
        <
    </div>
</div>
</div> </div>
1
qo'shib qo'ydi
Rahmat, men o'z echimlarni qayta ko'rib chiqdim va darslarni qo'shish o'rniga ko'rsatma yashirishni ishlatdim. Yaxshi ishlagan.
qo'shib qo'ydi muallif Marc Sommerson, manba

You know the structure. Just navigate up to the parent then search for the previous button. No need to use expensive operations like closest

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('.ct_amy_arrows_next').on('click', function() {
  $(this).parent().find('.ct_amy_arrows_prev').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="arrownav1" class="ct_as_arrow_nav ">
    <div class="ct_amy_arrows_next">
        >
    </div>
    <div class="ct_amy_arrows_prev" style="display: none;">
        <
    </div>
</div>
</div> </div>
1
qo'shib qo'ydi
Rahmat, men o'z echimlarni qayta ko'rib chiqdim va darslarni qo'shish o'rniga ko'rsatma yashirishni ishlatdim. Yaxshi ishlagan.
qo'shib qo'ydi muallif Marc Sommerson, manba

Bunga eng yaqin va find usullari orqali erishish mumkin:

$('.next-row').click(function(){
    $(this).closest('.ct_as_arrow_nav').find('.ct_amy_arrows_prev').addClass("prev_show");
});

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('.next-arrow').click(function(){  
 $(this).closest('.ct_as_arrow_nav').find('.ct_amy_arrows_prev').addClass("prev_show");
});
.prev_show{
   color:red;
}
i{
   font-size:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div id="arrownav1" class="ct_as_arrow_nav ">
    <div class="ct_amy_arrows_next">
        
    </div>
    <div class="ct_amy_arrows_prev">
        
    </div>
</div>
<div id="arrownav2" class="ct_as_arrow_nav ">
    <div class="ct_amy_arrows_next">
        
    </div>
    <div class="ct_amy_arrows_prev">
        
    </div>
</div>
</div> </div>
0
qo'shib qo'ydi

Bunga eng yaqin va find usullari orqali erishish mumkin:

$('.next-row').click(function(){
    $(this).closest('.ct_as_arrow_nav').find('.ct_amy_arrows_prev').addClass("prev_show");
});

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('.next-arrow').click(function(){  
 $(this).closest('.ct_as_arrow_nav').find('.ct_amy_arrows_prev').addClass("prev_show");
});
.prev_show{
   color:red;
}
i{
   font-size:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div id="arrownav1" class="ct_as_arrow_nav ">
    <div class="ct_amy_arrows_next">
        
    </div>
    <div class="ct_amy_arrows_prev">
        
    </div>
</div>
<div id="arrownav2" class="ct_as_arrow_nav ">
    <div class="ct_amy_arrows_next">
        
    </div>
    <div class="ct_amy_arrows_prev">
        
    </div>
</div>
</div> </div>
0
qo'shib qo'ydi

Siz shunday qilishingiz mumkin:

$(this).closest(".ct_as_arrow_nav")
       .find(".ct_amy_arrows_prev")
       .removeClass("prev_show");;

Yoki shunga o'xshash:

$(this).parent()
       .next(".ct_amy_arrows_prev")
       .removeClass("prev_show");

Note: If the navs are dynamically created then consider binding the events like this!

Tartibga solish:

Bunga bunga initButtons ni o'zgartiring:

function initButtons() {
  jQuery('#arrownav' + sliderID + ' .next-arrow').click(gonext);
  jQuery('#arrownav' + sliderID + ' .prev-arrow').click(goprev);
} 

Shunday qilib, gonewt va goprev o'q tugmalariga bog'liq bo'lgan this ega bo'ladi.

0
qo'shib qo'ydi
Barcha nav kodini JS faylidan qo'shib qo'ydim, iltimos.
qo'shib qo'ydi muallif Marc Sommerson, manba
Bu ishlamaydi, hech qanday sinf qo'shilmaydi. Har qanday fikr nima uchun? Bundan tashqari, jQuery uchun $ o'zgarish kerak edi
qo'shib qo'ydi muallif Marc Sommerson, manba
@MarcSommerson, mening javobim siz uchun ishlamaydi? Jonli parolni qo'shdim.
qo'shib qo'ydi muallif Mihai Alexandru-Ionut, manba
Hech qanday fikrga ega emasman. Agar uning postiga qaralsangiz, u tugmachaning o'zi ishlayotganini ko'rasiz.
qo'shib qo'ydi muallif Mihai Alexandru-Ionut, manba
@MarcSommerson, men sizning kodingizda jQuery (bu) .closest (".ct_as_arrow_nav") borligini bilib olasiz, chunki siz belgini bosgan ob'ektni parametr sifatida qabul qilishingizni taklif qilaman. (".Ct_amy_arrow & zwnj; s_prev"). AddClass va bu kodi belgisi emas, balki belgisi uchun mos keladi.
qo'shib qo'ydi muallif Mihai Alexandru-Ionut, manba
@MarkcSommerson navlar dinamik ravishda yaratilganmi? Voqeani tinglovchiga qo'ying, u ochiladimi?
qo'shib qo'ydi muallif ibrahim mahrir, manba
@ Alexandru-IonutMihai Men navlarning dinamik ravishda ishlab chiqarilganini va voqea delegatsiyasi kerak deb o'ylayman!
qo'shib qo'ydi muallif ibrahim mahrir, manba
@MarcSommerson tahrirni tekshiring!
qo'shib qo'ydi muallif ibrahim mahrir, manba

Siz shunday qilishingiz mumkin:

$(this).closest(".ct_as_arrow_nav")
       .find(".ct_amy_arrows_prev")
       .removeClass("prev_show");;

Yoki shunga o'xshash:

$(this).parent()
       .next(".ct_amy_arrows_prev")
       .removeClass("prev_show");

Note: If the navs are dynamically created then consider binding the events like this!

Tartibga solish:

Bunga bunga initButtons ni o'zgartiring:

function initButtons() {
  jQuery('#arrownav' + sliderID + ' .next-arrow').click(gonext);
  jQuery('#arrownav' + sliderID + ' .prev-arrow').click(goprev);
} 

Shunday qilib, gonewt va goprev o'q tugmalariga bog'liq bo'lgan this ega bo'ladi.

0
qo'shib qo'ydi
Barcha nav kodini JS faylidan qo'shib qo'ydim, iltimos.
qo'shib qo'ydi muallif Marc Sommerson, manba
Bu ishlamaydi, hech qanday sinf qo'shilmaydi. Har qanday fikr nima uchun? Bundan tashqari, jQuery uchun $ o'zgarish kerak edi
qo'shib qo'ydi muallif Marc Sommerson, manba
@MarcSommerson, mening javobim siz uchun ishlamaydi? Jonli parolni qo'shdim.
qo'shib qo'ydi muallif Mihai Alexandru-Ionut, manba
Hech qanday fikrga ega emasman. Agar uning postiga qaralsangiz, u tugmachaning o'zi ishlayotganini ko'rasiz.
qo'shib qo'ydi muallif Mihai Alexandru-Ionut, manba
@MarcSommerson, men sizning kodingizda jQuery (bu) .closest (".ct_as_arrow_nav") borligini bilib olasiz, chunki siz belgini bosgan ob'ektni parametr sifatida qabul qilishingizni taklif qilaman. (".Ct_amy_arrow & zwnj; s_prev"). AddClass va bu kodi belgisi emas, balki belgisi uchun mos keladi.
qo'shib qo'ydi muallif Mihai Alexandru-Ionut, manba
@MarkcSommerson navlar dinamik ravishda yaratilganmi? Voqeani tinglovchiga qo'ying, u ochiladimi?
qo'shib qo'ydi muallif ibrahim mahrir, manba
@ Alexandru-IonutMihai Men navlarning dinamik ravishda ishlab chiqarilganini va voqea delegatsiyasi kerak deb o'ylayman!
qo'shib qo'ydi muallif ibrahim mahrir, manba
@MarcSommerson tahrirni tekshiring!
qo'shib qo'ydi muallif ibrahim mahrir, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb