Блог

Главная - Вопросы по программированию - Как синхронизировать два значения с помощью data-target и data-value?

Как синхронизировать два значения с помощью data-target и data-value?

#javascript #jquery

#javascript #jquery

Вопрос:

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

 //changes data of description
const tasks = ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5', 'Task 6', 'Task 7'];
$('[data-target]').on("click", "li", function() {
  const clicked = $(this).addClass("active");
  clicked.siblings(".active").removeClass("active");
  $(clicked.parent().data('target')).text(tasks[clicked.index()]);
})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" role="dialog" tabindex="-1" id="amodal">
  <ul class="list-group">
    <li class="list-group-item" style="height: 276px;">
      //span we need to sync with first span
      <span id="adescr">Описание выбранного задания.</span></li>
  </ul>
</div>

<ul class="list-group" id="a" data-target="#descr">
  <li class="list-group-item" id="a1">
    <span>Задание 1</span>
  </li>
</ul>
<ul class="list-group">
  <li class="list-group-item" style="height: 276px;">
    //first span
    <span id="descr" data-bind="aadescr">Описание выбранного задания.</span></li>
</ul>

Комментарии:

1. Не могли бы вы, пожалуйста, попытаться привести в порядок HTML

2. @JaromandaX Готово!

Ответ №1:

использование одного и того же идентификатора для двух пролетов не работает

Правильно, но уникальное имя класса, используемое для обоих, будет работать.

 data-target=".descr"
  

 //changes data of description
const tasks = ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5', 'Task 6', 'Task 7'];
$('[data-target]').on("click", "li", function() {
  const clicked = $(this).addClass("active");
  clicked.siblings(".active").removeClass("active");
  $(clicked.parent().data('target')).text(tasks[clicked.index()]);
})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" role="dialog" tabindex="-1" id="amodal">
  <ul class="list-group">
    <li class="list-group-item" style="height: 76px;">
      <!--span we need to sync with first span-->
      <span class="descr">Описание выбранного задания.</span></li>
  </ul>
</div>

<ul class="list-group" id="a" data-target=".descr">
  <li class="list-group-item" id="a1">
    <span>Задание 1</span>
  </li>
</ul>
<ul class="list-group">
  <li class="list-group-item" style="height: 276px;">
    <!--first span-->
    <span class="descr" data-bind="aadescr">Описание выбранного задания.</span></li>
</ul>

Теперь, когда вы нажимаете на [data-target]>li него, он обновит как «первый диапазон», так и «диапазон, который нам нужно синхронизировать».

Ответ №2:

Вот очень грубая функция плагина $.fn.bindText() , которую вы могли бы вызвать вместо text() , и она также будет использовать data-bind атрибут для обновления связанного элемента

 const tasks = ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5', 'Task 6', 'Task 7'];

$.fn.bindText = function(txt) {
  $('#'   $(this).data('bind')).add(this).text(txt);
}

$('[data-target]').on("click", "li", function() {
  const clicked = $(this).addClass("active");
  clicked.siblings(".active").removeClass("active");
  $(clicked.parent().data('target')).bindText(tasks[clicked.index()]);
})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" role="dialog" tabindex="-1" id="amodal">
  <ul class="list-group">
    <li class="list-group-item" style="height: 276px;">
      //span we need to sync with first span
      <span id="adescr">Описание выбранного задания.</span></li>
  </ul>
</div>

<ul class="list-group" id="a" data-target="#descr">
  <li class="list-group-item" id="a1">
    <span>Задание 1</span>
  </li>
</ul>
<ul class="list-group">
  <li class="list-group-item" style="height: 276px;">
    //first span
    <span id="descr" data-bind="adescr">Описание выбранного задания.</span></li>
</ul>