Question

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

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

一个

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

和其他

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

我编写了一个代码，用于在删除或添加图像时动态更新文本区域。

编写代码的输出问题

当我删除图片时，src和title会被删除，但仍有不必要的,
当我手动添加图片时，<textarea>都已更新，但当我删除该图片时，只有<textarea> class="imagenames"的图片会更新。 <textarea> class="hoverinformation " JSON无法更新。
当我删除从<textarea>生成的所有图像（最初在用户加载页面时出现），然后如果我手动添加图像，则inspect element都不会更新（当我登记textarea时，$(document).on('click', '.removediv', function () { //For textarea with class 'imagenames' var imagename = $(this).parent().siblings('.imagenames'); var text = imagename.val(); var imgSrc = $(this).prev().attr("src"); imagename.val(text.replace(imgSrc, "")); //For textarea with class 'hoverinformation' var hoverinformation = $(this).parent().siblings('.hoverinformation'); var text = hoverinformation.val(); var title = $(this).prev().attr("title"); hoverinformation.val(text.replace(title,"")); $(this).closest('div.imagewrap').remove(); });都会动态更新）

删除图像和更新文本区域的代码

<textarea>

我的代码手动添加图片并同时更新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'); }) }); $('#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 Addition"); $('#exampleModalCenter').modal('hide'); });

#pragma once
#include <iostream>
#include <list>
#include "Teacher.h"
#include "Registry.h"
#include "stdafx.h"

using namespace std;

#ifndef LESSON_H
#define LESSON_H

class Lesson
{
private:
    double price;           //Price charged for single lesson
    int maxSize;            //Maximum number of students allowed in the class
    string date;            //Date the class takes place
    int numStudent;         //Number of students currently in the class
    list<Registry> Roster;  //All current registrys for the lesson
    int lessonID;           //Unique identifier
    string name;            //Name of the lesson
    Teacher teacher;        //the Teacher hosting lesson
    string category;        //Named category of the lesson

public:
    Lesson(Teacher teacher, string name, string category, double price, int maxSize, string date);

    ~Lesson();
};

#endif

Fiddle Link

我不明白为什么会出现这种奇怪的行为。任何帮助都会很棒。

Answer 1

这样你就可以摆脱＆＃34;，＆＃34;

$(document).on('click', '.removediv', function () {
  var imagename = $(this).parent().siblings('.imagenames');
  var text   = imagename.val();
  var imgSrc = $(this).prev().attr("src");
  text = removestring(text, imgSrc);
  imagename.val(text);


  var hoverinformation  = $(this).parent().siblings('.hoverinformation');
  var text   = hoverinformation.val();
  var title = $(this).prev().attr("title");

  text = removestring(text, title);

  hoverinformation.val(text);



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


});



function removestring(text, title) {
    var arr = text.split(",");
  var index = arr.indexOf(title);
  if (index > -1) {
         arr.splice(index, 1);
  }
    text = arr.join(",");
  return text;
}

Textarea内容不能使用JS / jquery动态更新

1 个答案: