Как распечатать только выборку из моего элемента списка?

Question

Я искал, как и мне не удалось найти ответ.

У меня есть 3 списка групповых групп, подобных этому, на моей веб-странице Контейнеры

Япри попытке написать выделение, используя jQuery / javascript для моего правого контейнера, чтобы напечатать в моем нижнем контейнере.

**My HTML**
<div class="col-6">
    <div class="card ">
        <div class="card-header py-2">LEFT CONTAINER</div>
        <div id="leftContainer" class="list-group" style="height:425px; overflow-y: scroll">
        <!-- POPULATED BY JINJA -->
        {% for campaign in campaign_histories %}
            <a href="#" data-set="{{ campaign_histories|length }}" id = "{{forloop.counter}}" class="list-group-item py-0 list-group-item-action">{{forloop.counter}}.  {{ campaign }}</a>
        {% endfor %}
        </div>
    </div>
</div>
<div class="col-6">
    <div class="card">
        <div class="card-header py-2">RIGHT CONTAINER</div>
        <div id="rightContainer" class="list-group" style="height:425px; overflow-y: scroll">
            <!-- POPULATED BY AJAX BELOW -->
        </div>
    </div>
</div>                
<div class="col-12" >
    <div class="card mt-4" id="BOTTOM CONTAINER">
        <div class="card-header py-2">BOTTOM CONTAINER</div>
        <div id="bottonContainer" class="list-group" style="height:190px;">
        </div>
    </div>
</div>

<p id = "DEBUG"></p>  <!-- FOR DEBUG PRINT ONLY, REMOVE LATER-->

Мой jQuery / AJAX:

<script>
$("#leftContainer> a").click(function(event){
    event.preventDefault();
    $("#leftContainer > a").removeClass("active");
    $(this).addClass("active");
    $.ajax({
        type:'POST',
        url:"view_results/onclick/",
        data:{
            idx:index,
            csrfmiddlewaretoken:"{{ csrf_token }}"
        },
        dataType:"text json",
        success: function(resp){
            // console.log(resp.model_list);
            $("#rightContainer > a").removeClass("active");
            $("#rightContainer > a").hide();
            $("#rightContainer ").empty()
            success_flag =1;
            for(i=0; i<resp.model_list.length; i++){            
                $("#rightContainer ").append('<a href="#" id ='+i+' class="list-group-item list-group-item-success py-0 list-group-item-action">'+resp.model_list[i]+'</a>');
            }
        },
    })
});
</script>

Я добавил ЭТО ниже в мои сценарии, чтобы отладить распечатать его на моем <p id = "DEBUG"> в моем HTML.Но это печать всего списка.Я не знаю, как получить выбор из моего ПРАВИЛЬНОГО КОНТЕЙНЕРА для печати.Мне нужен и текст, и индекс.:

$("#rightContainer").on('click',function(){        
        event.preventDefault();
        $("#rightContainer > a").removeClass("active");
        $(this).toggleClass("active");
        document.getElementById("debug").innerHTML = $(this).children().attr("id")
    });

Моя НЕОБХОДИМОСТЬ: я хочу напечатать на своем BOTTOMCONTAINER ТОЛЬКО выбор из моего RIGHTCONTAINER вместо всего списка.Мне также нужно добавить кнопку в конец элемента, напечатанного в нижнем контейнере.Я использую bootstrap 4.

Можете ли вы помочь?Мой проект - Django / Python в бэкэнде.

Answer 1

Что вы можете сделать, это после того, как ваш цикл, который добавляет все ссылки в нужный контейнер, вы можете добавить прослушиватель по щелчку для всех добавленных вами ссылок (со специальным именем класса, чтобы быть конкретным).

Затем в функции, которая обрабатывает событие click, вы можете использовать ключевое слово this для доступа к свойствам нажатой ссылки и использовать их для создания следующего элемента для добавления в нижний контейнер.Вот пример:

Сначала вы должны добавить имя класса для всех ссылок в нужном контейнере, чтобы мы знали, что нацелены только на них.Обратите внимание, что я только добавил rightContainerLink к классам.

for(i=0; i<resp.model_list.length; i++){            
    $("#rightContainer ").append('<a href="#" id ='+i+' class="list-group-item list-group-item-success py-0 list-group-item-action rightContainerLink">'+resp.model_list[i]+'</a>');
}

Затем вы можете использовать этот селектор классов, чтобы быть уверенным, что вы запускаете handleLinkClick только тогда, когда нажата ссылка rightContainer.

$(".rightContainerLink").on("click", handleLinkClick);

function handleLinkClick() {
  let index = $(this).attr("id");
  let text = $(this).text();
  let elem = `<span>index is: ${index} text is: ${text}</span>`;
  elem += "<button> I am a button</button> <br/>";
  $("#bottomContainer").append(elem);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rightContainer">
  <a href="#" id='1' class="list-group-item list-group-item-success py-0 list-group-item-action rightContainerLink">model 1</a>
  <a href="#" id='2' class="list-group-item list-group-item-success py-0 list-group-item-action rightContainerLink">model 2</a>
  <a href="#" id='3' class="list-group-item list-group-item-success py-0 list-group-item-action rightContainerLink">model 3</a>

  <!-- This link will not add to the bottom div because it doesn't have rightContainerLink class -->
  <a href="#" id='4' class="list-group-item list-group-item-success py-0 list-group-item-action">I will not be added to bottom 4</a>
</div>
<hr/>
<div id="bottomContainer">
</div>