JQuery - приращение и идентификация

1

У меня есть только понятия JQuery и снова, и почему сегодня мне нужна помощь...

Я делаю своего рода онлайн-редактор для создания своих информационных бюллетеней. На этой странице: http://emaildesigner.fr/test/index.html и здесь js: http://emaildesigner.fr/test/_scripts/newsletter-buildertest.js

Концепция классическая: мы нажимаем "Добавить" → заголовок, затем + вставляем, и это добавляет редактируемый блок. на данный момент есть только один блок, но концепция состоит в том, чтобы поместить несколько и использовать их один или несколько раз каждый.

Блоки построены таким образом:

    <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>

с экраном @media, я показываю либо мобильную версию, либо версию для ПК.

Мне нужно, чтобы издатель обновлял одновременно код ПК и мобильный код (потому что мобильный код скрыт, и он будет делать все в двух экземплярах... поскольку разрешение слишком велико).

в общем, мои блоки состоят из 1 - 3 изображений, от 1 до 6 текстов и от 1 до 3 ссылок

Я объясняю вам свою проблему: в настоящее время, когда мы нажимаем на "Добавить" → заголовок, тогда + insert, и это добавляет редактируемый блок. этот блок состоит из изображения + ссылка и текстовая + ссылка, когда я обновляю текст (я помещаю код js только на текст блока), он обновляет часть 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++;
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<button id="add">Add Addresses</button>
<div id="newBloc"></div>
</body>
</html>

Надеюсь, что было ясно. Вы можете мне помочь? Извините за мой плохой английский, но я французский

заранее спасибо

  • 0
    твое право. Вы должны сделать уникальный идентификатор по приращению для идентифицированного человека. Но теперь, с чем вы сталкиваетесь?
  • 0
    спасибо, что заверили меня, что я на правильном пути, вы можете помочь мне адаптировать код?
Показать ещё 2 комментария
Теги:

1 ответ

0
Лучший ответ

@ZeroCool Я пытался помочь вам и сделать пример для вашего решения. Живая ссылка, например, я надеюсь, что вы получите концепцию для этой проблемы.

Добавить Parent Id и onClick получить ParentID Тогда keyup называют залив в ParentID с вашим class именем. Подобно..

После установки родительского идентификатора...

// 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 -->
Поделиться
  • 0
    спасибо, я постараюсь понять твой код
  • 0
    не могли бы вы помочь мне снова, пожалуйста?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню