Question

我有两个执行不同功能的JavaScript。从今天开始，第1节是新的并且有效。但是，当我将第2节放回第2节时，它不再起作用。如果我将“ populateThumbnails（）;”行注释掉从第1节开始，第2节有效（当然不是第1节）。我猜第1节和第2节之间存在兼容性冲突。

他们做什么并不重要吗？如果它有助于第1部分填充列表，而第2部分则在按下按钮时更改按钮的颜色并运行一些ajax代码。当第1部分位于代码中时，第2部分不会更改颜色或运行Ajax代码。第1节适用于代码中是否包含第2节。

任何帮助表示赞赏。

// Section 1
function populateThumbnails(){
 var container = document.getElementByID("thumbsList");
 container.innerHTML = '';
 for(var index = 0; index < thumbnailArray.length; index++){
  var imageHERE = images[thumbnailArray[index]];
  var imageElement = document.createElement("IMG");
  for (var key in Object.keys(imageHERE)){
   imageElement.setAttribute(key, imageHERE[key]);
  }
 container.appendChild(imageElement);
 }
}
populateThumbnails();

// Section 2
$(function() {
 $('form').on('click', 'input[type="submit"]', function(e) {
  if($(this).val() == 'Delete') {
   if (confirm("Are you really sure you want to delete this photo?")) {
    doAjax($(this));
   } 
  } else {
   doAjax($(this));
  }
  e.preventDefault();
 });

 function doAjax(that){
  $.ajax({
   type: 'post',
   url: "ajax_update_code.php",
   data: $(that).parent().serialize(),
   });
   var clicked = that,
   imageName = clicked.data("image");
   newValue = "B" + imageName;
   document.getElementById(newValue).innerHTML = ". Changed";
   clicked.removeClass("c_off").addClass("c_on");
   $('input[type="submit"]').each(function() {
    var self2 = $(this);
   if (!clicked.is(self2)) {
    if (self2.hasClass("c_on") && imageName == self2.data("image"))
     self2.removeClass("c_on").addClass("c_off");
    }
   });
  }
 }
);

如果有帮助，并且您希望看到代码正常工作，那么我已经用禁用的ajax代码制作了一个演示

工作 https://garryjones.se/phototest/working.html

不起作用 https://garryjones.se/phototest/notworking.html

两个摘要发生冲突

0 个答案: