JS - ifodali ranglar bazasini o'zgartirish uchun qanday tanlash mumkin

Agar parametr rang bazasini o'zgartirsam, unda agar sozlamani o'zgartirsangiz. Bu mening shaklim:

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

function myFunction() {
  var lia = document.createElement("h5");
  var lib = document.createElement("p");

  var item = document.getElementById('task').value;
  var pro = document.getElementById('priority').value;

  var item_list = document.createTextNode(item);
  var item_pro = document.createTextNode(pro);

  lia.appendChild(item_list);
  lib.appendChild(item_pro);

  document.getElementById("result").appendChild(lia);
  document.getElementById("priorit").appendChild(lib);

  if (pro == 'Urgent') {
    $("p").css('color', 'red');
  }
  if (pro == 'Critical') {
    $("p").css('color', 'orange');
  }
  if (pro == 'Normal') {
    $("p").css('color', 'green');
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="task" type="text" />


<button onclick="myFunction()">Add</button>

List Result

<table>
  <th id="result"></th>
  <th id="priorit"></th>
<table>
</div> </div>

This if statement its what i want to do. but for now, any time im adding to the list another item with other option, all the colors are change to the last one. you can see my problem here:

https://jsbin.com/selenifepa/edit?html,js,output

what should i do?

0
$ ("p") "sahifadagi barcha

elementlari" degan ma'noni anglatadi.

qo'shib qo'ydi muallif Pointy, manba
ishlatiladigan CSS tanlovchisi DOM ichidagi barcha xat elementlariga ishora qiladi, bu esa uning rangini o'zgartiradi.
qo'shib qo'ydi muallif Roljhon, manba

6 javoblar

: last-child CSS-ni tanlang.

Ushbu kodni ko'ring

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

function myFunction() {

var lia = document.createElement("h5");
var lib = document.createElement("p");

var item = document.getElementById('task').value;
var pro = document.getElementById('priority').value;

var item_list = document.createTextNode(item);
var item_pro = document.createTextNode(pro);

lia.appendChild(item_list);
lib.appendChild(item_pro);

document.getElementById("result").appendChild(lia);
document.getElementById("priorit").appendChild(lib);


if(pro=='Urgent'){
   $("p:last-child").css('color','red');
 }
 if(pro=='Critical'){
   $("p:last-child").css('color','orange');
 }
 if(pro=='Normal'){
   $("p:last-child").css('color','green');
 }
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="task" type="text"/>


<button onclick="myFunction()">Add</button>

List Result

<table>
<th id="result"></th>
<th id="priorit"></th>
<table>
</div> </div>

0
qo'shib qo'ydi
agar iloji bo'lsa, men boshqa savol so'rashni istayman .. qanday qilib ro'yxat tartibini birinchi o'ringa qo'yish mumkin? har qanday yangi Favqulodda topshiriq birinchi navbatda, keyin keskin, keyin normal va hokazo qanday qilib buni qila olaman?
qo'shib qo'ydi muallif BMARK AMIT, manba

Faqatgina $ ("p") tomonidan p elementlarini tanlayotgandirsiz. Siz faqat hozir qo'shilgan elementni tanlashingiz kerak, ya'ni lib . Lekin lib JavaScript o'zgaruvchisidir, shuning uchun jQuery-ga jQuery obyektini aylantirib jQuery CSS amal qiling.

e.g. $(lib).css('color', 'red');

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

function myFunction() {
  var lia = document.createElement("h5");
  var lib = document.createElement("p");

  var item = document.getElementById('task').value;
  var pro = document.getElementById('priority').value;

  var item_list = document.createTextNode(item);
  var item_pro = document.createTextNode(pro);

  lia.appendChild(item_list);
  lib.appendChild(item_pro);

  document.getElementById("result").appendChild(lia);
  document.getElementById("priorit").appendChild(lib);

  if (pro == 'Urgent') {
    $(lib).css('color', 'red');
  }
  if (pro == 'Critical') {
    $(lib).css('color', 'orange');
  }
  if (pro == 'Normal') {
    $(lib).css('color', 'green');
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="task" type="text" />


<button onclick="myFunction()">Add</button>

List Result

<table>
  <th id="result"></th>
  <th id="priorit"></th>
  <table>
</div> </div>

0
qo'shib qo'ydi

Masala shundan iboratki, $ ('p') tanlagichi faqat siz qo'shganingiz emas, balki DOM dagi mavjud p elementlariga mos keladi. Buni faqatgina yangi qo'shilgan p yorlig'iga ta'sir qilish uchun $ (lib) dan foydalangan holda o'zgartirishingiz mumkin.

$(lib).css('color', 'green');

Shunga qaramasdan, siz ham < Siz allaqachon jQuery-dan foydalanayotgan bo'lsangiz, buni qanday qilish kerak:

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

$('#add').click(function(e) {
  e.preventDefault();
  var pro = $('#priority').val();
  var $lia = $("
").text($('#task').val()).appendTo('#result');
  var $lib = $("").text(pro).appendTo('#priorit');

  if (pro == 'Urgent') {
    $lib.css('color', 'red');
  }
  if (pro == 'Critical') {
    $lib.css('color', 'orange');
  }
  if (pro == 'Normal') {
    $lib.css('color', 'green');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="task" type="text" />


<button id="add">Add</button>

List Result

<table>
  <th id="result"></th>
  <th id="priorit"></th>
<table>
</div> </div>

0
qo'shib qo'ydi

Buning sababi $ ('p') bilan barcha p belgilarini tanlashdir. Bundan tashqari, vanilli JS bilan jQuery aralashtirilgan. Kodni soddalashtirish uchun jQuery'dan foydalanishni xohlayman. Mana shu.

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

function add() {
 //select the elements and assign to a var, that way we don't have to be selecting the elements over and over, which is 'slow' (research "Why traversing the DOM is slow")
  var results = $('#results'),
  task = $('#task'),
  priority = $('#priority'),
  
 //create the new div element with it's content
  newResult = $('<div>'+task.val()+' '+priority.val()+'</div>');

 //Decide what color to apply
  if(priority.val() == 'Urgent'){
    newResult.css('color','red');
  }
  
  if(priority.val() == 'Critical'){
    newResult.css('color','orange');
  }
  
  if(priority.val() == 'Normal'){
    newResult.css('color','green');
  }
  
 //append the new div to the list of results
  results.append(newResult);
  
 //clear the input and focus the cursor for the next value to be added
  task.val('').focus();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="task" type="text"/>


<button onclick="add()">Add</button>

List Result

<div id="results"></div>
</div> </div>

0
qo'shib qo'ydi

Bu erda bu hiylani qilish kerak

function myFunction() {

    var lia = document.createElement("h5");
    var lib = document.createElement("p");


  var item = document.getElementById('task').value;
  var pro = document.getElementById('priority').value;


  var item_list = document.createTextNode(item);
  var item_pro = document.createTextNode(pro);

  lia.appendChild(item_list);
  lib.appendChild(item_pro);
  if(pro=='Urgent'){
    lia.style.color='red';
     lib.style.color='red';  
}else{
  lia.style.color='orange';
     lib.style.color='orange';
}

    document.getElementById("result").appendChild(lia);
  document.getElementById("priorit").appendChild(lib);



document.getElementById('task').value = '';


}
0
qo'shib qo'ydi

Barcha xat elementlarini tanlash o'rniga, shu kabi elementni tanlashingiz mumkin:

if(pro=='Urgent'){
   $(lib).css('color','red');
 }
 if(pro=='Critical'){
   $(lib).css('color','orange');
 }
 if(pro=='Normal'){
   $(lib).css('color','green');
 }

Agar siz bu bilan almashtirsangiz va bu shunday bo'lsa ...

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