Блог

Главная - Вопросы по программированию - Загрузить значение одного div в другой

Загрузить значение одного div в другой

#html #jquery

#HTML #jquery

Вопрос:

В приведенном ниже коде у меня есть три кнопки — P1, P2 и P3, под каждой из которых есть div карты. Справа у меня есть другой div с текстом «ТЕКСТ ДОЛЖЕН ОТОБРАЖАТЬСЯ ЗДЕСЬ». Я хочу, чтобы при нажатии на кнопку соответствующие данные заменяли приведенный выше текст. Например, если я нажму на P2, текст в правом поле должен измениться на «Данные для P2»

 <body>
    <div class="row container">
        <div class="col-lg-6">
            <button data-val="p1">P1</button>
            
            <button data-val="p2">P2</button>
            
            <button data-val="p3">P3</button>
            
        </div>
        <div class="col-lg-6">
            <div class="second">
                <div class="card">
                    <div class="card-body">
                        <span>
                           TEXT SHOULD BE DISPLAYED HERE
                        </span>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="row container">
        <div class="card" data-val="p1">
            <div class="card-body">
                <span>
                    Data for P1
                </span>
            </div>
        </div>
        <div class="card"  data-val="p2">
            <div class="card-body">
                <span>
                    Data for P2
                </span>
            </div>
        </div>
        
        <div class="card"  data-val="p3">
            <div class="card-body">
                <span>
                    Data for P3
                </span>
            </div>
        </div>
    </div>
</body>

Как я могу добиться этого с помощью jQuery? Пожалуйста, обратите внимание, что я не просто хочу заменить текст, но и весь div в реальном сценарии.

Заранее спасибо!

Ответ №1:

Вы можете прослушивать событие нажатия на каждой кнопке. По щелчку мыши вы можете получить текстовое значение, связанное с кнопкой, и скопировать его на карточку:

 $('.row .col-lg-6 button').on('click', function(e) {
    var dVal = this.dataset.val;
    var cardEle = $(this).closest('.row.container').next().find('.card').filter(function(idx, ele) {
        return ele.dataset.val == dVal;
    });
    var txt = cardEle.text().trim();
    $(this).closest('.row').find('.col-lg-6 .second .card-body span').text(txt);
})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="row container">
    <div class="col-lg-6">
        <button data-val="p1">P1</button>

        <button data-val="p2">P2</button>

        <button data-val="p3">P3</button>

    </div>
    <div class="col-lg-6">
        <div class="second">
            <div class="card">
                <div class="card-body">
                        <span>
                           TEXT SHOULD BE DISPLAYED HERE
                        </span>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="row container">
    <div class="card" data-val="p1">
        <div class="card-body">
                <span>
                    Data for P1
                </span>
        </div>
    </div>
    <div class="card"  data-val="p2">
        <div class="card-body">
                <span>
                    Data for P2
                </span>
        </div>
    </div>

    <div class="card"  data-val="p3">
        <div class="card-body">
                <span>
                    Data for P3
                </span>
        </div>
    </div>
</div>

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

1. привет, есть ли способ напрямую скопировать весь div? Что, если эти div под кнопкой находятся в совершенно другой разметке и связаны через какой-то общий атрибут. Как я могу это сделать?

2. Хотя это решает проблему, я попытался использовать более простой метод, и он сработал, как ожидалось, следующим образом (при нажатии кнопки) $(‘.second .card’).html($(this).next ().html()); — заменив вместо этого весь div. Теперь проблема в том, что если я хочу применить другой CSS к обоим разделам карты, как я могу это сделать, сохранив CSS для второго раздела карты?

3. Добавьте фиктивный класс…. Пожалуйста, избегайте использования .html()

4. Почему бы и нет? Как тогда скопировать весь div целиком?

5. вам нужно использовать jQuery.clone() плюс добавить или вставить после….

Ответ №2:

используйте следующий jquery

  $(document).on('click', 'button', function (e) {
     spanText = $(this).next().find('span:first').text()
         
      $('.replace-text').text(spanText)
  });

добавьте класс, replace-text на <span> который вы хотите заменить текст, например

  <span class="replace-text">
    TEXT SHOULD BE DISPLAYED HERE
  </span>

ДЕМОНСТРАЦИЯ 

 <!DOCTYPE html>
<html>
<head>
<style>
.siblings * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
     $(document).on('click', 'button', function (e) {
            spanText = $(this).next().find('span:first').text()
         
            $('.replace-text').text(spanText)
        });
});
</script>
</head>
<body>
<body>
    <div class="row">
        <div class="col-lg-6">
            <button data-val="p1">P1</button>
            <div class="card">
                <div class="card-body">
                    <span>
                        Data for P1
                    </span>
                </div>
            </div>
            <button data-val="p2">P2</button>
            <div class="card">
                <div class="card-body">
                    <span>
                        Data for P2
                    </span>
                </div>
            </div>
            <button data-val="p3">P3</button>
            <div class="card">
                <div class="card-body">
                    <span>
                        Data for P3
                    </span>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="second">
                <div class="card">
                    <div class="card-body">
                        <span class="replace-text">
                           TEXT SHOULD BE DISPLAYED HERE
                        </span>
                    </div>
                </div>
            </div>
        </div>

    </div>    
</body>
</html>