Question

我搜索了怎么做，但找不到答案。

我的网页中有3个这样的列表组框 Containers

我正在尝试使用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>

我在脚本中添加了以下内容，以将其打印到HTML中的<p id = "DEBUG">中。但是它正在打印整个列表。我不知道如何从我的正确容器中进行选择。我需要文本和索引。：

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

我的需要是：我只想将RIGHTCONTAINER中的选择内容打印到我的BOTTOMCONTAINER，而不是整个列表。我还需要在底部容器中打印的项目末尾添加一个按钮。我正在使用引导程序4。

可以帮忙吗？我的项目是后端的Django / Python。

Answer 1

您可以做的是在将所有链接附加到正确的容器的循环之后，可以在所有添加的链接上添加on click侦听器（使用特殊的类名）。

然后在处理click事件的函数中，可以使用this关键字来访问clicked链接的属性，并使用它们来创建要添加到底部容器的下一个元素。这是一个示例：

首先，您应该在正确的容器中为所有链接添加一个类名，以便我们知道我们仅针对那些链接。请注意，下面我仅将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>');
}

然后，您可以继续使用该类选择器，以确保仅在单击rightContainer链接时才运行handleLinkClick。

$(".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>

如何仅打印列表组项目中的选择？

1 个答案: