如何在 UI 列表中单击按钮时获取带有颜色的多个值？

问题描述 投票：0回答：4

我有多个带有值和色环的框。我想在单击“保存”按钮后在下面的 UL 列表中添加所有/多个数据。

我尝试过的：

$('.save').click(function() {
  var text = $('.content-box .text').text();
  var color = $('.content-box .color-circle').css('background');
  $('.data-list').append('<li>' + text + '</li>').css('background', color);
});
.content-box {
  border: 1px solid #ccc;
  border-bottom: 5px;
  overflow: hidden;
  padding: 10px;
}

.color-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="col-md-12 d-custom-none">
  <div class="content-box">
    <span class="text">Success</span>
    <span class="color-circle bg-success"></span>
  </div>
  <div class="content-box">
    <span class="text">Danger</span>
    <span class="color-circle bg-danger"></span>
  </div>
  <div class="content-box">
    <span class="text">Warning</span>
    <span class="color-circle bg-warning"></span>
  </div>
  <button class="save btn btn-primary" type="button">Save Data in below list</button>

  <br><br>
  <h5>Below is the list where data will display after click on above save button</h5>
  <ul class="data-list">
  </ul>

</div>

我想添加每个 LI 中的每个数据，而不是添加单个 LI 中的所有数据。

javascript jquery html css
4个回答
1
投票

您必须循环遍历您的 

context-box
class
div
元素。

尝试下面的工作代码-

$('.save').click(function() {
  $('.data-list').html('');
  var liElem = '';
  $('.content-box').each(function(index, val){
    var txt = $(val).find('.text').text();
    var bgColor = $(val).find('.color-circle').css('background-color');
    liElem += '<li style="background-color: '+bgColor+'">' + txt + '</li>';
  });
  $('.data-list').append(liElem);
});
.content-box {
  border: 1px solid #ccc;
  border-bottom: 5px;
  overflow: hidden;
  padding: 10px;
}

.color-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="col-md-12 d-custom-none">
  <div class="content-box">
    <span class="text">Success</span>
    <span class="color-circle bg-success"></span>
  </div>
  <div class="content-box">
    <span class="text">Danger</span>
    <span class="color-circle bg-danger"></span>
  </div>
  <div class="content-box">
    <span class="text">Warning</span>
    <span class="color-circle bg-warning"></span>
  </div>
  <button class="save btn btn-primary" type="button">Save Data in below list</button>

  <br><br>
  <h5>Below is the list where data will display after click on above save button</h5>
  <ul class="data-list">
  </ul>

</div>

1
投票

您必须循环所有 

$('.content-box')
并使用每个中的 
text
和 
css
附加到 
li

$('.save').click(function() {
  $('.content-box').each((index, box) => {
    var text = $(box).find(".text").text();
    var color = $(box).find(".color-circle").css('background');
    $('.data-list').append('<li style="background:' + color + '">' + text + '</li>');
  });
});
.content-box {
  border: 1px solid #ccc;
  border-bottom: 5px;
  overflow: hidden;
  padding: 10px;
}

.color-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="col-md-12 d-custom-none">
  <div class="content-box">
    <span class="text">Success</span>
    <span class="color-circle bg-success"></span>
  </div>
  <div class="content-box">
    <span class="text">Danger</span>
    <span class="color-circle bg-danger"></span>
  </div>
  <div class="content-box">
    <span class="text">Warning</span>
    <span class="color-circle bg-warning"></span>
  </div>
  <button class="save btn btn-primary" type="button">Save Data in below list</button>

  <br><br>
  <h5>Below is the list where data will display after click on above save button</h5>
  <ul class="data-list">
  </ul>

</div>

1
投票

您基本上已经获取并应用了单个元素的 

text
和 
background
属性，而您需要对所有元素执行此操作。要获取每个值，您必须循环遍历它们以便提前获取和使用它们。

我尝试为您所说的问题陈述创建解决方案的片段。请检查并告诉我这是否是您所需要的。

$(document).on("click", ".save", function() {
  var $dataList = $(".data-list");

  $(".content-box").each(function() {
    let text = $(this).find(".text").text();
    let color = $(this).find(".color-circle").css("background");

    let $listItem = $("<li/>", {
      class: "result-list-item"
    });

    $listItem.css("background", color);
    $listItem
      .html(text)
      .appendTo($dataList);
  });
});
.content-box {
  border: 1px solid #ccc;
  border-bottom: 5px;
  overflow: hidden;
  padding: 10px;
}

.color-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="col-md-12 d-custom-none">
  <div class="content-box">
    <span class="text">Success</span>

    <span class="color-circle bg-success"></span>
  </div>

  <div class="content-box">
    <span class="text">Danger</span>

    <span class="color-circle bg-danger"></span>
  </div>

  <div class="content-box">
    <span class="text">Warning</span>

    <span class="color-circle bg-warning"></span>
  </div>

  <button class="save btn btn-primary" type="button">Save Data in below list</button>

  <br><br>

  <h5>Below is the list where data will display after click on above save button</h5>

  <ul class="data-list">
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

干杯！

1
投票

$('.save').click(function() {
  $('.content-box').map((i,v)=>{
    let text = $(v).find(".text").text();
    let color = $(v).find(".color-circle").css('background');
    $('.data-list').append($('<li>' + text + '</li>').css('background', color));
  });
  
});
.content-box {
  border: 1px solid #ccc;
  border-bottom: 5px;
  overflow: hidden;
  padding: 10px;
}

.color-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="col-md-12 d-custom-none">
  <div class="content-box">
    <span class="text">Success</span>
    <span class="color-circle bg-success"></span>
  </div>
  <div class="content-box">
    <span class="text">Danger</span>
    <span class="color-circle bg-danger"></span>
  </div>
  <div class="content-box">
    <span class="text" >Warning</span>
    <span class="color-circle bg-warning"></span>
  </div>
  <button class="save btn btn-primary" type="button">Save Data in below list</button>

  <br><br>
  <h5>Below is the list where data will display after click on above save button</h5>
  <ul class="data-list">
  </ul>

</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.