jQuery: boshqa DIV elementlaridan olingan sekin urishlarga asoslangan abstrakt DIV kontentini yangilang

JS va jQuery dasturlarini o'rganishga harakat qilaman va buni amalga oshirish uchun loyihani ishlataman. Men oxirgi 4 soat ichida boshimni qirib tashlayman, qanday qilib biror narsani qilishni tushunishga harakat qilaman va butunlay yopilib qolaman.

Asosan, div ning tarkibini boshqa div'lardan ".blue" da joylashgan HTML ma'lumotlarini ishlatib, sekin urish bilan yangilamoqchiman. Menda narx va tushuntirish joylari bor. Men qaerga ketsam qat'i nazar, birinchi divning ma'lumotlarini to'plashga muvaffaq bo'ldim, ammo men uni bosib o'tayotgan DIV ga asoslanib, uni yangilab bo'lmadi.

Men ushbu ishni sinab ko'rish uchun $ (this) kalit so'zi bir nechta kombinatsiyani sinab ko'rdim, lekin uni tushuna olmadim. Men ushbu forumlarni qidirib topdim va biroz yechim topdim, lekin uni topolmadim, deb o'ylayman, bu mening fikrimcha.

Mana, men qaradim: Kontentni div-da yangilashni bosing boshqa div

Ishonchim komilki, bu juda sodda bo'lishi kerak, lekin bugun boshimga tushmayman.

Mana mening kodim:

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

var upload = $('.blue').data('target1');
var download = $('.blue').data('target2');
var price = $(this).data('price');

$(document).ready(function() {
  $('.blue').on('click', function() {
      $(upload).removeClass('hide');
      $(download).removeClass('hide');
  });
  $('#price').text(price);
});
div {
  margin:0;
  padding:0;
}
.blue {
  background-color: #ddddEE;
  border: 1px solid black;
}
.blue:hover {
  cursor: pointer;
  background-color: #aaaaEE;
}
.red {
  background-color: #EEdddd;
  border: 1px solid black;
}
.bold {
  font-weight: 600;
  text-align: center;
}
.hide {
  display:none;
}
#price {
  font-size: 22px;
  color: blue;
  font-weight: 400;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-3">
  <div class="col-xs-12 blue" data-target1="#target1" data-target2="#target2">
  $300

Description 1

text here
text here
text here </div> </div> <div class="col-xs-3"> <div class="col-xs-12 blue" data-target1="#target3" data-target2="#target4"> $600

Description 2

text here
text here
text here </div> </div><div class="col-xs-3"> <div class="col-xs-12 blue" data-target1="#target5" data-target2="#target6"> $1200

Description 3

text here
text here
text here </div> </div> <div class="col-xs-3"> <div class="col-xs-12 red"> Summary
<div id="target1" class="hide">TARGET 1</div> <div id="target2" class="hide">TARGET 2</div>. <div id="target3" class="hide">TARGET 3</div> <div id="target4" class="hide">TARGET 4</div> <div id="target5" class="hide">TARGET 5</div> <div id="target6" class="hide">TARGET 6</div> </div> </div>
</div> </div>

Here is my fiddle: https://jsfiddle.net/rodcunha/qav9sn6n/42/

Ushbu chaqaloq uchun biron bir yordam uchun oldindan rahmat.

0
Ehtimol, bu erda javob berilgan: stackoverflow.com/questions/2487747/&hellip ;
qo'shib qo'ydi muallif Korgrue, manba
Global o'zgaruvchilar document.ready funksiyasi ichida harakatlantiring
qo'shib qo'ydi muallif Always Learning, manba
Global o'zgaruvchilar document.ready funksiyasi ichida harakatlantiring
qo'shib qo'ydi muallif Always Learning, manba
Har doim o'rganish to'g'ri bo'lgan, o'zgaruvchan noto'g'ri ishlatilganda, noto'g'ri qadriyatlarni qaytarib olgan. Fikrlaringizni qadrlang
qo'shib qo'ydi muallif rodcunha, manba
Har doim o'rganish to'g'ri bo'lgan, o'zgaruvchan noto'g'ri ishlatilganda, noto'g'ri qadriyatlarni qaytarib olgan. Fikrlaringizni qadrlang
qo'shib qo'ydi muallif rodcunha, manba

8 javoblar

Men siz xohlagan narsalaringizdan xabardormisiz, buni tekshirasizmi?

https://jsfiddle.net/rodcunha/qav9sn6n/42/

$(document).ready(function() {  

      $('.blue').click(function() {          
          var x = $(this).attr('data-target1');      
          $(x).removeClass('hide');
      });
      $('#price').text(price);
 }); 

<div> <div class = body> removeClass toggleClass -ga o'zgartirishingiz mumkin.

0
qo'shib qo'ydi
yaxshi, yordam berishdan mamnunman
qo'shib qo'ydi muallif Luiz Rossi, manba
Luiz, vaqtingizni izohlash uchun juda minnatdormiz. Boshqa foydalanuvchilarning yordami bilan uni tushunishga muvaffaq bo'ldim.
qo'shib qo'ydi muallif rodcunha, manba

Men siz xohlagan narsalaringizdan xabardormisiz, buni tekshirasizmi?

https://jsfiddle.net/rodcunha/qav9sn6n/42/

$(document).ready(function() {  

      $('.blue').click(function() {          
          var x = $(this).attr('data-target1');      
          $(x).removeClass('hide');
      });
      $('#price').text(price);
 }); 

<div> <div class = body> removeClass toggleClass -ga o'zgartirishingiz mumkin.

0
qo'shib qo'ydi
yaxshi, yordam berishdan mamnunman
qo'shib qo'ydi muallif Luiz Rossi, manba
Luiz, vaqtingizni izohlash uchun juda minnatdormiz. Boshqa foydalanuvchilarning yordami bilan uni tushunishga muvaffaq bo'ldim.
qo'shib qo'ydi muallif rodcunha, manba

bahosi har bir oralig'i uchun ma'lumotlar narxi uchun qo'shing.

$300

HTML:

<div class="col-xs-3">
    <div class="col-xs-12 blue" data-target1="#target1" data-target2="#target2">
      $300

Description 1

text here
</div> </div> <div class="col-xs-3"> <div class="col-xs-12 blue" data-target1="#target3" data-target2="#target4"> $600

Description 2

text here
</div> </div> <div class="col-xs-3"> <div class="col-xs-12 blue" data-target1="#target5" data-target2="#target6"> $1200

Description 3

text here
</div> </div> <div class="col-xs-3"> <div class="col-xs-12 red"> Summary
<!-- add 'summary' class for all div --> <div id="target1" class="hide summary">TARGET 1</div> <div id="target2" class="hide summary">TARGET 2</div> <div id="target3" class="hide summary">TARGET 3</div> <div id="target4" class="hide summary">TARGET 4</div> <div id="target5" class="hide summary">TARGET 5</div> <div id="target6" class="hide summary">TARGET 6</div> </div> </div>

Joriy kodlangan divni olish uchun currentTarget har doim .blue ni qaytarish uchun target o'rniga currentTarget .blue class div ga klik manzilingizga qarab farq qilishi mumkin.

jQuery:

$(document).ready(function() {
      $('.blue').on('click', function(e) {
          var upload = $(e.currentTarget).data('target1');
          var download = $(e.currentTarget).data('target2');
          var price = $(e.target).parent().find('.price').data('price');

        //add a new class 'summary' for all 'summary id div'.
        //  loop over all '.summary' class and add 'hide' class   

         $('.summary').each(function(index, item) {
          //console.log(item);
           $(item).removeClass('hide').addClass('hide');
         }); 

          $(upload).removeClass('hide');
          $(download).removeClass('hide');
          $('#price').text(price);

      });

  }); 


jsfiddle link: https://jsfiddle.net/sajibcse68/qav9sn6n/49/

0
qo'shib qo'ydi
Xush kelibsiz. Endi xulosalar maqsadli ta'rif matn bilan almashtiriladi. Mening javobimni tahrir qildim. Bundan tashqari, jsfiddle tekshiring.
qo'shib qo'ydi muallif Sajib Khan, manba
Savolingiz Sajibga javob berish uchun vaqtingiz uchun katta rahmat. Men buni juda qadrlayman.
qo'shib qo'ydi muallif rodcunha, manba
Bu juda katta rahmat. Bitta narsa, maqsadli ta'rif matnining o'rnini bosa olmaydi, faqat qo'shiladi. Men uni almashtirmoqchi edim, lekin bu yerda ishlashim kerak bo'lgan narsa bor, va men buni bir oz vaqtdan keyin sinab ko'rishim uchun boshimga urib qo'yaman. Javobingizni Sajibga minnatdorchilik bildiring.
qo'shib qo'ydi muallif rodcunha, manba

bahosi har bir oralig'i uchun ma'lumotlar narxi uchun qo'shing.

$300

HTML:

<div class="col-xs-3">
    <div class="col-xs-12 blue" data-target1="#target1" data-target2="#target2">
      $300

Description 1

text here
</div> </div> <div class="col-xs-3"> <div class="col-xs-12 blue" data-target1="#target3" data-target2="#target4"> $600

Description 2

text here
</div> </div> <div class="col-xs-3"> <div class="col-xs-12 blue" data-target1="#target5" data-target2="#target6"> $1200

Description 3

text here
</div> </div> <div class="col-xs-3"> <div class="col-xs-12 red"> Summary
<!-- add 'summary' class for all div --> <div id="target1" class="hide summary">TARGET 1</div> <div id="target2" class="hide summary">TARGET 2</div> <div id="target3" class="hide summary">TARGET 3</div> <div id="target4" class="hide summary">TARGET 4</div> <div id="target5" class="hide summary">TARGET 5</div> <div id="target6" class="hide summary">TARGET 6</div> </div> </div>

Joriy kodlangan divni olish uchun currentTarget har doim .blue ni qaytarish uchun target o'rniga currentTarget .blue class div ga klik manzilingizga qarab farq qilishi mumkin.

jQuery:

$(document).ready(function() {
      $('.blue').on('click', function(e) {
          var upload = $(e.currentTarget).data('target1');
          var download = $(e.currentTarget).data('target2');
          var price = $(e.target).parent().find('.price').data('price');

        //add a new class 'summary' for all 'summary id div'.
        //  loop over all '.summary' class and add 'hide' class   

         $('.summary').each(function(index, item) {
          //console.log(item);
           $(item).removeClass('hide').addClass('hide');
         }); 

          $(upload).removeClass('hide');
          $(download).removeClass('hide');
          $('#price').text(price);

      });

  }); 


jsfiddle link: https://jsfiddle.net/sajibcse68/qav9sn6n/49/

0
qo'shib qo'ydi
Xush kelibsiz. Endi xulosalar maqsadli ta'rif matn bilan almashtiriladi. Mening javobimni tahrir qildim. Bundan tashqari, jsfiddle tekshiring.
qo'shib qo'ydi muallif Sajib Khan, manba
Savolingiz Sajibga javob berish uchun vaqtingiz uchun katta rahmat. Men buni juda qadrlayman.
qo'shib qo'ydi muallif rodcunha, manba
Bu juda katta rahmat. Bitta narsa, maqsadli ta'rif matnining o'rnini bosa olmaydi, faqat qo'shiladi. Men uni almashtirmoqchi edim, lekin bu yerda ishlashim kerak bo'lgan narsa bor, va men buni bir oz vaqtdan keyin sinab ko'rishim uchun boshimga urib qo'yaman. Javobingizni Sajibga minnatdorchilik bildiring.
qo'shib qo'ydi muallif rodcunha, manba

Muammoning sababini tushunish va uni qanday hal qilish kerakligini tushunish uchun siz yozgan turli xil yo'riqnomalar va siz foydalanadigan ba'zi jQuery yo'riqnomalarining qanday ishlashi haqida hozirgi vaziyatda ehtiyot bo'lishingiz kerak.

Qayd qilish kerak bo'lgan birinchi narsa: Javascript kodingizning dastlabki uch satrlari o'qilganidan keyin baholanadi. Shuning uchun ular baholagandan keyin sizning o'zgaruvchilaringizning holati quyidagicha:

upload = '#target1'
download = '#target2'
price = undefined

Since these are the values used in the rest of the code, in all cases, you can see why it always shows what you expect for the first <div> only. To understand why, let's analyze the first line :

var upload =
    $('.blue')       [1]
    .data('target1') [2]
  • [1] returns the jQuery collection containing the DOM <div> elements that have the blue class. So far, so good?
  • [2] returns the value associated with the data-target1 attribute of the first element of the jQuery collection (see documentation for the .data method)

What you probably want is for upload, download and price to contain the values of the data-* attributes corresponding to the <div> the user clicks on. You cannot know in advance which element the user will click on, so it does not make sense to read the values before the user clicks on anything. So you should read the values when the event is processed.

According to jQuery's documentation for the event handlers, this is the element the event is currently associated with. So your <div> element.

Now that you know that, you probably realized what you should do to correct your code. By moving your existing code around and making the smallest changes possible, you end up with the following working code.

$(document).ready(function() {
    $('.blue').on('click', function() {
        var upload = $(this).data('target1');
        $(upload).removeClass('hide');
        var download = $(this).data('target2');
        $(download).removeClass('hide');

        var price = $(this).find('[data-price]').data('price');
        $('#price').text(price);
    });
});
0
qo'shib qo'ydi
Agar sizning hozirgi muammolaringiz hal etilsa, javoblardan birini qabul qilishni unutmang (siz eng foydali topdingiz, ya'ni kelajakda bir xil muammolarga duch keladigan boshqa kishilarga yordam beradigan va bu Q & Ani topishga yordam beradigan eng mushkul masala). Baxtli o'rganish!
qo'shib qo'ydi muallif KevinLH, manba
Yordamdan xursand bo'ldim. Kitoblar va o'quv qo'llanmalarni o'qish - bu ishlab chiquvchining asboblari va uning asosiy tushunchalarini tushunishning yaxshi usuli (u atlanadigan narsa emas), lekin hech narsa hech qanday chayqalmaydi, xatoga yo'l qo'ymaydi va o'rgangan narsalaringiz uchun boshqalar bilan bahslashadi. sen bilan. ;-)
qo'shib qo'ydi muallif KevinLH, manba
Kechirasiz, men bundan oldin chop etilgan.
qo'shib qo'ydi muallif rodcunha, manba
Buning ta'rifida matnni almashtirishni qidiryapman, lekin siz kodingizni ko'rish va tushunishingizdan keyin buni qanday amalga oshirishni tezda bilib olgandim. Yana bir bor rahmat. Bu erda nima qilishni istagan edim: $ (document) .ready (function() {$ ('. blue'). ("klik", function() {$ ("qizil div"). "Hide") var yuk = $ (bu) .data ('target1'); $ (upload) .removeClass ('yashirish'); var download = $ (bu) .data ('target2'); ("narx"); $ ('# narx'); matn (narx);); });
qo'shib qo'ydi muallif rodcunha, manba
Sizning yordamingizni qadrlang. Tanlangan echim va yana bir bor sizga katta rahmat. Agar siz Dublinda bo'lsangiz, sizga qahva sotib olishga xursand bo'lishimga ruxsat bering. :)
qo'shib qo'ydi muallif rodcunha, manba
Sharhingiz uchun sizga rahmat aytadigan so'zlarim yo'q. Bu sizdan juda mazmunli va juda saxiy edi. Menga ushbu kontseptsiyani tushuntirib beradigan vaqt va kuchni juda qadrlayman. Men hali o'rganishning dastlabki kunlarida turibman va men atrofdagilar uchun juda ko'p narsalar bor va kitoblarni o'qish bilan kurashaman, shuning uchun men o'zimning shaxsiy loyihalarimga kirishga qaror qildim.
qo'shib qo'ydi muallif rodcunha, manba

Muammoning sababini tushunish va uni qanday hal qilish kerakligini tushunish uchun siz yozgan turli xil yo'riqnomalar va siz foydalanadigan ba'zi jQuery yo'riqnomalarining qanday ishlashi haqida hozirgi vaziyatda ehtiyot bo'lishingiz kerak.

Qayd qilish kerak bo'lgan birinchi narsa: Javascript kodingizning dastlabki uch satrlari o'qilganidan keyin baholanadi. Shuning uchun ular baholagandan keyin sizning o'zgaruvchilaringizning holati quyidagicha:

upload = '#target1'
download = '#target2'
price = undefined

Since these are the values used in the rest of the code, in all cases, you can see why it always shows what you expect for the first <div> only. To understand why, let's analyze the first line :

var upload =
    $('.blue')       [1]
    .data('target1') [2]
  • [1] returns the jQuery collection containing the DOM <div> elements that have the blue class. So far, so good?
  • [2] returns the value associated with the data-target1 attribute of the first element of the jQuery collection (see documentation for the .data method)

What you probably want is for upload, download and price to contain the values of the data-* attributes corresponding to the <div> the user clicks on. You cannot know in advance which element the user will click on, so it does not make sense to read the values before the user clicks on anything. So you should read the values when the event is processed.

According to jQuery's documentation for the event handlers, this is the element the event is currently associated with. So your <div> element.

Now that you know that, you probably realized what you should do to correct your code. By moving your existing code around and making the smallest changes possible, you end up with the following working code.

$(document).ready(function() {
    $('.blue').on('click', function() {
        var upload = $(this).data('target1');
        $(upload).removeClass('hide');
        var download = $(this).data('target2');
        $(download).removeClass('hide');

        var price = $(this).find('[data-price]').data('price');
        $('#price').text(price);
    });
});
0
qo'shib qo'ydi
Agar sizning hozirgi muammolaringiz hal etilsa, javoblardan birini qabul qilishni unutmang (siz eng foydali topdingiz, ya'ni kelajakda bir xil muammolarga duch keladigan boshqa kishilarga yordam beradigan va bu Q & Ani topishga yordam beradigan eng mushkul masala). Baxtli o'rganish!
qo'shib qo'ydi muallif KevinLH, manba
Yordamdan xursand bo'ldim. Kitoblar va o'quv qo'llanmalarni o'qish - bu ishlab chiquvchining asboblari va uning asosiy tushunchalarini tushunishning yaxshi usuli (u atlanadigan narsa emas), lekin hech narsa hech qanday chayqalmaydi, xatoga yo'l qo'ymaydi va o'rgangan narsalaringiz uchun boshqalar bilan bahslashadi. sen bilan. ;-)
qo'shib qo'ydi muallif KevinLH, manba
Sharhingiz uchun sizga rahmat aytadigan so'zlarim yo'q. Bu sizdan juda mazmunli va juda saxiy edi. Menga ushbu kontseptsiyani tushuntirib beradigan vaqt va kuchni juda qadrlayman. Men hali o'rganishning dastlabki kunlarida turibman va men atrofdagilar uchun juda ko'p narsalar bor va kitoblarni o'qish bilan kurashaman, shuning uchun men o'zimning shaxsiy loyihalarimga kirishga qaror qildim.
qo'shib qo'ydi muallif rodcunha, manba
Sizning yordamingizni qadrlang. Tanlangan echim va yana bir bor sizga katta rahmat. Agar siz Dublinda bo'lsangiz, sizga qahva sotib olishga xursand bo'lishimga ruxsat bering. :)
qo'shib qo'ydi muallif rodcunha, manba
Kechirasiz, men bundan oldin chop etilgan.
qo'shib qo'ydi muallif rodcunha, manba
Buning ta'rifida matnni almashtirishni qidiryapman, lekin siz kodingizni ko'rish va tushunishingizdan keyin buni qanday amalga oshirishni tezda bilib olgandim. Yana bir bor rahmat. Bu erda nima qilishni istagan edim: $ (document) .ready (function() {$ ('. blue'). ("klik", function() {$ ("qizil div"). "Hide") var yuk = $ (bu) .data ('target1'); $ (upload) .removeClass ('yashirish'); var download = $ (bu) .data ('target2'); ("narx"); $ ('# narx'); matn (narx);); });
qo'shib qo'ydi muallif rodcunha, manba

Kodni o'zgartiring:

  $(document).ready(function() {
      $('.blue').on('click', function(e) {
        $($(e.currentTarget).data('target1')).removeClass('hide');
        $($(e.currentTarget).data('target2')).removeClass('hide');
        $('#price').text($(e.target).parent().find('.price').data('price'));
      });
  }); 
0
qo'shib qo'ydi
Rahmat, javobingizni qadrlang
qo'shib qo'ydi muallif rodcunha, manba

Kodni o'zgartiring:

  $(document).ready(function() {
      $('.blue').on('click', function(e) {
        $($(e.currentTarget).data('target1')).removeClass('hide');
        $($(e.currentTarget).data('target2')).removeClass('hide');
        $('#price').text($(e.target).parent().find('.price').data('price'));
      });
  }); 
0
qo'shib qo'ydi
Rahmat, javobingizni qadrlang
qo'shib qo'ydi muallif rodcunha, 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