Question

我正在使用Gridster进行网页。小部件上有图像。可以使用+和X按钮添加和删除这些图像。

小部件上有两个<textarea>字段。

一个

class="hoverinformation" \\ it captures title attribute for image

和其他

class="imagenames"\\it captures image src.

预期输出

当我删除所有现有图片并添加新图片时，<textarea>应该更新。

2.当我删除任何图片时，<textarea>都应该更新（删除该图片的src和title）

JS：

 //To delete an image
$(document).on('click', '.removediv', function () {
  $(this).closest('div.imagewrap').remove();

  //Here I want that will remove the content from both the textareas

});



//Adding Images from Modal

    var parentLI;
    $(document).on("click", ".addmorebrands", function() {
                    parentLI = $(this).closest('li');
            $('#exampleModalCenter').modal('show');
                $('#exampleModalCenter img').click(function(){
            $(this).addClass('preselect');
            $(this).siblings().removeClass('preselect');
            selectedImageSRC = $(this).attr('src');
          })
        });


      //To add an image
    $('#add-image').click(function(){
        parentLI.append('<div class="imagewrap"><img class="images" src="'+selectedImageSRC+'" title="Manual Addition"> <input type="button" class="removediv" value="X" /></div>');

      parentLI.children('.imagenames').append(', '+selectedImageSRC);
      parentLI.children('.hoverinformation').append(', '+"Manual Additon");

      $('#exampleModalCenter').modal('hide');
    });

我尝试了不同的方法，但他们没有提供所需的输出，所以有人可以检查一下

Fiddle

Answer 1

$(document).on('click', '.removediv', function() {

var container = $(this).parents('.gs-w'),
namesContainer = container.find('.imagenames'),
titlesContainer = container.find('.hoverinformation'),
newNames = [],
newTitles = [];

$(this).closest('div.imagewrap').remove();

container.find('div.imagewrap').children('img:visible').each(function(){
newNames.push($(this).prop('src'))
});

container.find('div.imagewrap').children('img:visible').each(function(){
newTitles.push($(this).prop('title'))
});

titlesContainer.val(newTitles.join(','));
namesContainer.val(newNames.join(','));

});

新小提琴：

https://jsfiddle.net/edh4131/cxyp2a0j/6/

Answer 2

我认为这就是你要找的东西：https://jsfiddle.net/sz4wcLgo/52/

function trimChar(string, charToRemove) {
    while(string.charAt(0)==charToRemove) {
        string = string.substring(1);
    }

    while(string.charAt(string.length-1)==charToRemove) {
        string = string.substring(0,string.length-1);
    }

    return string;
}

function updateTextarea(imageNames, imageSrc) {
  var imageNamesValue = imageNames.val();
  imageNamesValue = imageNamesValue.replace(imageSrc, '');
  imageNamesValue = trimChar(imageNamesValue, ',');
  imageNames.val(imageNamesValue.trim());
}

//从小部件中删除图像的功能

$(document).on('click', '.removediv', function () {
  var imageDelete = $(this).closest('div.imagewrap');
  var imgTag = imageDelete.find('img');
  var imageTitle = imgTag.attr('title');
  var imageSrc = imgTag.attr('src');

  var textareaName = $(this).closest('li').find('.imagenames');
  var textareaTitle = $(this).closest('li').find('.hoverinformation');

  updateTextarea(textareaName, imageSrc);
  updateTextarea(textareaTitle, imageTitle);
  //Here I want that will remove the content from both the textareas
 imageDelete.remove();
});

$('#add-image').click(function(){
    parentLI.append('<div class="imagewrap"><img class="images" src="'+selectedImageSRC+'" title="Manual Addition"> <input type="button" class="removediv" value="X" /></div>');
  var imageNameValue = parentLI.children('.imagenames').val();
  var imageTitleValue = parentLI.children('.hoverinformation').val();
  if (imageNameValue === '') {
    parentLI.children('.imagenames').val(selectedImageSRC);
  } else {
    parentLI.children('.imagenames').val(imageNameValue +', '+selectedImageSRC);
  }
  if (imageTitleValue === '') {
    parentLI.children('.hoverinformation').val("Manual Addition");
  } else {
    parentLI.children('.hoverinformation').val(imageTitleValue+','+"Manual Addition");
  }


  $('#exampleModalCenter').modal('hide');
});

使用JS / jquery更新textarea

2 个答案: