Yangi yaratilgan elementning atributlarini o'zgartirish uchun jQuery'dan qanday foydalanish kerak

Menda quyidagi kod bor:

if (secsleft < 10) {
    var msg = 'No activity detected in the last 10 seconds.';
    if (auth == "true"){
        msg += '
You will be logged out in

' + secsleft + '


more seconds if no activity is detected.'; } else { msg += '
You will be redirected in

' + secsleft + '


more seconds if no activity is detected.'; } if (secsleft < 4) { //$("#counter").css({"color":"red"}); //$("#counter").css("color", "red"); document.getElementById("counter").style.color = "red"; } Message('' + msg + '', 10000); }

Shubhasiz, niyat to'rt sekunddan kam vaqt qolganda hisoblagich rangini qizilga almashtirishdir. Muammo shuki, id = "taymer" bilan p tag birinchi marta IF ifodasida hosil bo'ladi. Agar biror voqea bilan shug'ullanmoqchi bo'lsam, buni qanday qilishni bilaman. Bu shunday bo'ladi:

$(document).on(eventName, "#counter", function() {});

Lekin bu xususiyatlar uchun ishlamaydi. Ichki IFda sharhlangan koddan ko'rishingiz mumkin, lekin hech qanday ishlamayapti kabi kombinatsiyalarning barcha turlarini sinab ko'rdim. Aytganday (va men uchun hayratlanarli bo'lgan), men bu xususiyati osongina olishim mumkin, masalan:

alert($("#counter").css("color"));

menga to'g'ri qiymat beradi. Shunday qilib, qiymat qanday o'zgaradi?

1
Iltimos, etishmayotgan kodni qo'shing, yoki undan ham yaxshiroq, ishlaydigan ish qismini oling. Bundan tashqari, har qanday konsol xatosi? So'rovni yuborishdan avval uni tekshirib qo'ydingizmi? To'g'ri kelmagan yana bir narsa nima uchun auth == "rost" dan foydalanasiz? rost string sifatida?
qo'shib qo'ydi muallif Ionut, manba
Bundan tashqari, birinchi p yorlig'ini ochmaslik kerak.
qo'shib qo'ydi muallif Ionut, manba
Bundan tashqari, nima uchun siz alert ($ ("# counter") ni amalga oshirasiz? CSS ("rang")); ? Savolingizdan tegishli kod yo'q. Yaxshiyamki, quyida ko'p javoblar bor. Ehtimol, ulardan biri sizga yordam beradi.
qo'shib qo'ydi muallif Ionut, manba
Hali ham noaniq! secsleft va Message nima degani?
qo'shib qo'ydi muallif ibrahim mahrir, manba
seksleft tashqi taymer va xabar - bu xabarni yozishga qaratilgan funktsiya, biroq bu ikkala masala bilan bog'liq emas.
qo'shib qo'ydi muallif Chiwda, manba
@Shuning uchun afsuslanaman, qat'iy va sinovdan o'tgan va u hali ishlamaydi.
qo'shib qo'ydi muallif Chiwda, manba
Bundan tashqari, ish zarrachasini yaratish uchun kutubxonani (eslanmasdan) va unchalik ahamiyatga ega bo'lmagan kodlarni qo'shish kerak bo'lar edi. Xususan, gotomedia() funktsiyasi mavjud (mavjud info = ifvisible.getIdleInfo (); var secsleft = Math.round (info.timeLeft/1000); Yuqoridagi koddan oldin va} var counter = setInterval (gotomedia, 1000); ohirida.
qo'shib qo'ydi muallif Chiwda, manba

6 javoblar

Muammo shundaki, siz aslida elementni yaratmaysiz, shuning uchun ham agar siz jQuery tanlovchilari va getElementById qo'ng'iroqlari sahifada hech narsa topmasa, "kontra" identifikatori bilan hech narsa yo'q. Keyinchalik siz keyinchalik haqiqiy elementga aylantiradigan mag'lubiyatni yaratdingiz.

Nima qilishingiz kerak bo'lsa, haqiqiy elementni yaratib, keyin unga havola orqali uni o'z sahifangizga qo'yishdan oldin uning xususiyatlarini o'zgartirishingiz mumkin.

var counter = document.createElement('p');
counter.id = 'counter';
counter.style.color = red;

Yoki bu chiziqlar bo'ylab bir narsa. Sizga bu erda vanilli JS yechimini ko'rsatdim, lekin jQuery yordamida ham shunday qilishingiz mumkin:

var counter = $('

'); counter.attr('id','counter'); counter.css('color','red');
2
qo'shib qo'ydi
Ajoyib! Men uchun Duh. Siz haqsiz - men elementni yaratish uchun chiziqni chalkashtirib yubordim. Xabarni ko'chirishdan keyin ishladim ...
qo'shib qo'ydi muallif Chiwda, manba

Hujjatga qo'shilmagan elementlar uchun document.getElementById() dan foydalana olmaysiz. Shuning uchun u ishlamaydi.

Kodni juda soddalashtira olasiz.

  if (secsleft < 10) {
    var color = secsleft < 4 ? 'red' : 'inherit';
    var action = auth === 'true' ? 'logged out' : 'redirected';
    var msg = 'No activity detected in the last 10 seconds.'
            + '
You will be '+ action +' in ' + '' + secsleft + '' + ' more seconds if no activity is detected.'; Message('' + msg + '', 10000); }
1
qo'shib qo'ydi
Ishlay boshlaganimdan keyin soddalashtirmoqchi bo'ldim. ammo sizning javobingiz menga vaqtni tejab yubordi.
qo'shib qo'ydi muallif Chiwda, manba

Ko'p jQuery-ni ko'rmayapman, lekin siz buni tag qilib qo'shdingiz. Xo'sh, nima uchun bunday qilmaslik kerak?

$("body").find("#counter").css("color", "red");
1
qo'shib qo'ydi
Lol, dasturchi yoza oladigan eng yomon narsami? Dramatik ko'rinadi. Qanday bo'lmasin, men faqat berilgan narsalar bilan ishlayman. U xohlagan narsani o'zgartirishi mumkin.
qo'shib qo'ydi muallif Serg Chernata, manba
Men sinov qilmadim, ammo .find holda o'yladim, yangi yaratilgan elementga kirish mumkin bo'lmaydi.
qo'shib qo'ydi muallif Serg Chernata, manba
Ha, men biroz haddan tashqari xafa bo'ldim. $ ("body") ni ishlatish foydasiz, chunki u faqatgina $ ("# ...") identifikatorlari elementlarini tanlash uchun toping ("# ...") kodi kifoya qiladi!
qo'shib qo'ydi muallif ibrahim mahrir, manba

O'ylaymanki, siz qidirayotgan narsaga erishishning eng yoqimli usuli, jQuery yordamida uslublar qo'sha olasiz. Buning o'rniga, CSS-ga uslublar bilan ishlov berishga ruxsat berish yaxshiroq va jQuery mos ravishda sinflarga qo'shiladi.

In the below code the <4 check is used to assign a value to a counterClass variable which is then added to you counter element. You can then add a CSS rule to achieve the red colour.

if (secsleft < 10) {
    var counterClass = "";
    if (secsleft < 4) {
        counterClass = "warning";
    }
    var msg = 'No activity detected in the last 10 seconds.';
    if (auth == "true") {
        msg += '
You will be logged out in
p id="counter" class="' + counterClass + '">' + secsleft + '


more seconds if no activity is detected.'; } else { msg += '
You will be redirected in

' + secsleft + '


more seconds if no activity is detected.'; } Message('' + msg + '', 10000); }

Umid qilamanki bu yordam.

0
qo'shib qo'ydi

Birinchi muammo, document.getElementByID (... document.getElementByID (... document document ) uchun #counter elementini hali qo'shmaganligingizdir. ); usulida ( hali ).

Agar elementni boshqarish imkoniga ega bo'lish uchun siz uni hujjatga qo'shishingiz kerak, buning uchun siz foydalanmoqchi bo'lardingiz:

// appends the new "div" element to the body (I.E: inserts the new element at the end of the body)
$("body").append("<div id='element-id'>Hello World!</div>");

Siz ushbu usullardan foydalanishingiz mumkin:

// replaces the "innerHTML" of the "body" element with the new "div" element
$("body").html("<div id='element-id'>Hello World!</div>");
// prepends the new div to the body (I.E: inserts the element as the first child not the last child)
$("body").prepend("<div id='element-id'>Hello World!</div>");

Endi ikkinchi muammo shundaki siz olishni CSS xususiyatining qiymatini va NOT sozlamasini qabul qilishingiz kerak.

CSS funktsiyasining joriy qiymatini olish uchun quyidagicha foydalanasiz:

$("#element-id").css("property-name")

JQuery-da CSS xususiyatining qiymatini o'zgartirish uchun parametrini ishlatasiz:

// listen for an event to occur
$(document).on("event-name", function() {
 //change a single property of the element
  $("#element-id").css("property", "new-value");
});

Shuningdek, bu kabi JavaScript ob'ektidan foydalanib, elementning bir nechta xususiyatini birdan o'zgartirishi mumkin:

// listen for an event to occur
$(document).on("event-name", function() {
 //change multiple properties of the element using a JavaScript object
  $("#element-id").css({
    "property-name-one": "new-value",
    "property-name-two": "new-value"
  });
});

Yuqorida keltirilgan jQuery usullari haqida ko'proq ma'lumot olish uchun quyidagi havolalarni ko'rib chiqing:

Umid qilamanki bu yordam, omad va barcha yaxshi narsalar.

0
qo'shib qo'ydi

Siz DOMga hali qo'shilmagan getElementById yordamida elementni olmaysiz. inline uslublaridan foydalanishingiz mumkin.

if (secsleft < 10) {
                var alertColor = "inherit";
                if(secsleft < 4) {
                    alertColor = "red";
                }
                var msg = 'No activity detected in the last 10 seconds.';
                if (auth == "true"){
                    msg += '
You will be logged out in

' + secsleft + '


more seconds if no activity is detected.'; } else { msg += '
You will be redirected in

' + secsleft + '


more seconds if no activity is detected.'; } Message('' + msg + '', 10000); }
0
qo'shib qo'ydi
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