JQuery - 增量和识别

Question

我只有JQuery的概念，这就是今天我需要帮助的原因......

我正在做某种在线编辑器来创建我的新闻通讯。 在此页面上：http://emaildesigner.fr/test/index.html，此处为js：http://emaildesigner.fr/test/_scripts/newsletter-buildertest.js

这个概念很经典：我们点击“添加” - ＆gt;标题然后+插入，这会添加一个可编辑的块。 目前只有一个街区，但概念是放几个，每个一次或多次使用它们。

块以这种方式构建：

In [127]: np.asscalar(np.array([[[23.2]]]))
Out[127]: 23.2

In [128]: np.asscalar(np.array([[[[23.2]]]]))
Out[128]: 23.2

在@media屏幕上，我显示移动版或PC版。

我需要发布商同时更新PC代码和移动代码（因为移动代码是隐藏的，并且它会重复执行所有操作...因为分辨率太大了。）

一般来说，我的块包含1到3个图像，1到6个文本和1到3个链接

我向你解释我的问题： 目前，当我们点击“添加” - ＆gt;标题然后+插入，这会添加一个可编辑的块。 该块由图像+链接和文本+链接组成 当我更新文本时（我只将代码js放在块文本上）它更新了部分pc和移动部分但是如果我重做：“添加” - ＆gt;标题然后+插入，好吧我把块的文本放在逻辑上。

    <div class="sim-row" data-id="1">
      <div class="sim-row-header1">
      <div class="sim-row-header1-nav">
      <table width="700" align="center" cellpadding="0" cellspacing="0" class="hide" bordercolor="#FFFFFF" bgcolor="#fff" style="background-color:#fff; border: 10px solid #ffffff;">
              <tr>
                <td class="sim-row-header1-nav-logo sim-row-edit sim-row-header1-slider-left-link" data-type="image"><a href="#" target="_blank" style="text-decoration:none;" class="sim-row-edit" data-type="link"><img src="http://static3.qcnscruise.com/images/newsletters/fr/2017-12-20-test/art/pdt01.jpg" alt="" width="700" /></a></td>
              </tr>
              <tr>
                <td style="height:10px;"></td>
              </tr>
              <tr>
                <td class="sim-row-header1-slider-left-link"><a href="#" class="sim-row-edit" data-type="link" style="text-decoration:none;"><span style="color:#555759; font:bold 20px arial; margin:0; text-align:left;" class="texte1">TEXTE</span></a></td>
              </tr>
            </table>
<!--[if !mso]><!-->
<div class="ShowMobile" style="font-size:0;max-height:0;overflow:hidden;display:none; background-color:#FFF;">
 <table border="0" cellspacing="0" cellpadding="0" align="center" width="100%">
              <tr>
                <td><a href="#" target="_blank" style="text-decoration:none;"><img src="http://static3.qcnscruise.com/images/newsletters/fr/2017-12-20-test/art/_pdt01.jpg" width="100%" border="0" style="display:block; background-color:#ffcecb; font:bold 14px arial; color:#000000; text-align:center;" alt="" /></a></td>
              </tr>
              <tr>
                <td style="height:10px;"></td>
              </tr>
              <tr>
                 <td class="sim-row-header1-slider-left-link"><a href="#" class="sim-row-edit" data-type="link" style="text-decoration:none;"><span style="color:#555759; font:bold 20px arial; margin:0; text-align:left;" class="texte1">TEXTE</span></a></td>
              </tr>
            </table></div>
      </div>
      </div>
      </div>

所以我认为解决方案是能够识别每个块和每个部分在同一个块中更新，并且发布者只更新相关块的移动部件和PC（对于文本，链接和图片）。

我可以找到一个轨道的开始....在经过之后，我必须设法适应它......

$(document).on('keyup','#inputtexte1',function(){
    var txt = $(this).val();
    $('.texte1').text(txt);
});

var count=1;
$("#add").click(function(){
    var html="<div id='bloc"+count+"'><input type='text'></input></div>";
    $("#newBloc").append(html);

    count++;
});

我希望已经清楚了。 你能帮助我吗？ 抱歉我的英语不好，但我是法国人

提前谢谢

Answer 1

@ZeroCool我试着帮助你并为你的解决方案做一个例子Live link for example我跳过你得到这个问题的概念。

添加父ID并onClick获取 parentId 然后keyup使用您的class名称将此 parentId 托管到这个名称。喜欢..

设置父ID ...

// Global veritable dicelear  
 let userId = '';

$(document).on('click', '.edit', function() { 
  userId = '#'+ $(this).closest('ul').attr('id') + ' .userName'; //use #parentId
  $('#edit-from').modal('show') // Open your edit from ...

});

 $( "#memberNameGet" ).keyup(function(){
    $(userId).text($(this).val());
 });

let Id=1;
let userId = '';
$("#add").click(function(){
  let userName = $('#newUserName').val()
    let html='<ul id="user'+Id+'">'+
      '<li><span class="userName">'+userName+'</span>'+
      '<a href="javascript:" class="btn btn-primary edit_user">Edit </a>'+
      '</ul> </li>';
    $("#newBloc").append(html);
    Id++;
  $('#newUserName').val('')
}); 
$(document).on('click', '.edit_user', function() { 
  userId = '#'+ $(this).closest('ul').attr('id') + ' .userName';
  $('#myModal').modal('show')
  // console.log(userId);
});
 $( "#memberNameGet" ).keyup(function(){
   // alert(userId);
    $(userId).text($(this).val());
 });

span, a {
  display: inline-block;
  margin-right:15px;
}

input {
padding: 5px 15px }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



</br>
<div class="col-md-6">
  
<input type="text" id="newUserName">
<button id="add" class="btn btn-success"> Add Member</button>
</div>
</br></br>
<div class="col-md-5">
  <div id="newBloc"></div>
</div>


<!-- Add member modal -->


  <div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Edit Member</h4>
      </div> 
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label for="nameValue">Member Name</label>
              <input type="text" class="form-control" id="memberNameGet" placeholder="Type Member Name ">
            </div>
          </div>
         
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Updated</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->