Question

使用+按钮调用上面div块的apparance的完整代码，以及必须添加新<div class="item_socails">组件的<li>：

我有这样的下拉列表：

<div class="item_socails">
  <ul>
    <li><i class="fa fa-facebook-f"></i>
      <input value="laurie.lowe13" type="text">
    </li>
    <li><i class="fa fa-odnoklassniki"></i>
      <input value="laurie.lowe1997" type="text">
    </li>
    <li><i class="fa fa-vk"></i>
      <input value="laurie.lowe7" type="text">
    </li>
    <li>
      <button id="add_social_top" class="dropdown-button add_social waves-effect waves-blue" type="button"><span>+</span></button>
    </li>
  </ul>
</div>


<div class="show_social">
  <select>
    <option value="1">Twitter</option>
    <option value="2">LinkedIn</option>
    <option value="3">Facebook</option>
  </select>
  <input class="txt_select" type="text" value="laurie.lowe13">
  <button class="waves-effect waves-blue btn z-depth-1" type="submit">Add</button>
</div>

因此，基本上用户点击+按钮，此div显示，用户必须选择一个社交网络，并在输入中显示它的链接。在“添加”submit按钮上，我想生成一个新项目，如

<li><i class="fa fa-facebook-f"></i> <input value="laurie.lowe13" type="text" </li>

基本上是特定div上的新列表项，带有所选社交网络的图标和带引入值的输入。

我怎样才能实现它？感谢。

Answer 1

解决

更改了此块：

<div class="show_social">
    <select>
        <option value="1">Twitter</option>
        <option value="2">LinkedIn</option>
        <option value="3">Facebook</option>
    </select>
    <input class="txt_select" type="text"
           value="laurie.lowe13">
    <button
        class="waves-effect waves-blue btn z-depth-1"
        type="submit">Add
    </button>
</div>

with：

<div class="show_social">
    <select name="social" id="select_social">
        <option value="fa fa-twitter">Twitter</option>
        <option value="fa fa-linkedin">LinkedIn</option>
        <option value="fa fa-odnoklassniki">Ok.ru</option>
        <option value="fa fa-facebook-f">Facebook</option>
        <option value="fa fa-vk">Vk.com</option>
    </select>
    <input class="txt_select" type="text" id="select_input"
           value="laurie.lowe13">
    <button
        class="waves-effect waves-blue btn z-depth-1" id="addSocialNetwork"
        type="button">Добавить
    </button>
</div>

然后，在JS：

$('#addSocialNetwork').on('click', function() {
    var selectedIcon = $('#select_social').val();
    var selectedInput = $('#select_input').val();
    var template = '<li><i class="' + selectedIcon + '"></i> <input value="' + selectedInput + '" type="text"> </li>'
    $('#existingSocials').append(template);

});

说明：

用户点击+按钮，会显示div下拉社交网络。每个选择的值等于class的{{1}}。然后，用户正在向他的社交网络引入价值（链接）。当他点击fav-icon确认。运行一个脚本，该脚本采用当前选择的值选项Add button，然后获取输入值（链接）并准备整个模板，下一步将附加到现有块。

Answer 2

您可以使用append()为图标添加元素和:selected文字。

如果您想添加<li>元素，请将其包装到<ul>

中

Stack Snippet

$(".btn-add").on("click", function() {
  $(".main").append("<li><i class='fa fa-" + $(".show_social select").find(":selected").text().toLowerCase() + "'></i><input value=" + $(".txt_select").val() + " type='text'</li>")
})

.main {
  list-style: none;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="show_social">
  <select>
    <option value="1">Twitter</option>
    <option value="2">LinkedIn</option>
    <option value="3">Facebook</option>
  </select>
  <input class="txt_select" type="text" value="laurie.lowe13">
  <button class="waves-effect waves-blue btn btn-add z-depth-1" type="submit">Add</button>
  <ul class="main"></ul>
</div>

从下拉列表中选择动态添加特定的图标

2 个答案: