Как добавить/удалить изображения с помощью jquery?

Question

Я пытаюсь добавить и удалить изображения, содержащиеся в div, на основе, если они заблокированы или разблокированы. Любые разблокированные divs освобождаются, и соответственно добавляется новое изображение.

function dieClicked(){ 
    console.log(this); 
    if (this.locked == true){ 
     this.locked = !this.locked; 
     $(this).css("border-bottom", "none"); 
    } 
    else{ 
     this.locked = !this.locked; 
     $(".pics").each(function(){ 
      if (this.locked == true){ 
       $(this).css("border-bottom", "solid red 5px"); 
      } 
     }); 
    } 
} 


function swapUnlocked(){ 
    $(".pics").each(function(){ 
     if (this.locked == false){ 
      $(this).empty(); 
      $(this).append("<img src='style/images/dice.png'/>") 
     } 
    }); 
} 

Обе эти функции называются в основном следующим образом:

$("#newRoll").on("click", swapUnlocked); 
$(".pics").on("click",dieClicked); 

newRoll это идентификатор для кнопки, и .pics класс, что все дивы принадлежат. После нажатия на div в классе .pics появится красная рамка, и div будет заблокирован. Если снова нажать один и тот же div, граница исчезнет, ​​и теперь она будет разблокирована.

Если этот код выполнен, изображение будет переключаться в соответствии с назначением, когда оно было заблокировано, а затем разблокировано с помощью функции dieClicked. Однако, когда некоторые или все из делений не были нажаты (они не заблокированы или не разблокированы), эти изображения не переключаются, т.е. они обрабатываются так, как будто они заблокированы. Как я могу получить изображения, которые не были нажаты, чтобы их обрабатывали так, как будто они были разблокированы?

Answer 1

Вам необходимо инициализировать значение блокировки:

$(".pics").on("click",dieClicked).each(function() { this.locked = false; });

---

ETA: Рассматривали ли вы с помощью CSS? Вы можете оптимизировать ваш код немного, и это также поможет сохранить ваши стили централизованы:

CSS

.locked { border-bottom: solid red 5px; } 

JS

function dieClicked(){ 
    $(this).toggleClass("locked"); 
} 


function swapUnlocked(){ 
    $(".pics:not(.locked)").each(function(){ 
     $(this).empty(); 
     $(this).append("<img src='style/images/dice.png'/>"); 
    }); 
} 

Answer 2

Я не совсем уверен, что если вы имеете в виду, что:

function dieClicked(){ 
console.log(this); 
if (this.locked == true){ 
    this.locked = !this.locked; 
    $(this).css("border-bottom", "none"); 
    //$(this).remove(); //to delete 
    //$(this).hide(); //to hide -> can be shown with calling .show() on object 
} 
else{ 
    this.locked = !this.locked; 
    $(".pics").each(function(){ 
     if (this.locked == true){ 
      $(this).css("border-bottom", "solid red 5px"); 
      //$(this).show(); 
     } 
    }); 
} 
} 
function swapUnlocked(){ 
$(".pics").each(function(){ 
    if (this.locked == false){ 
     $(this).empty(); 
     $(this).append("<img src='style/images/dice.png'/>"); 
     this.locked = true; 
    } 
}); 
}