通过点击事件绑定使用attr（）更改可见性

时间：2018-11-22 16:26:44

标签： javascript jquery html

我正在尝试使用attr（）方法来更改输入的可见性并选择同级。

“添加”按钮适用于所有隐藏的元素，但是当我要将隐藏的属性重新添加到表单元素上时，没有任何反应。

$(function() {
    $("button[name='add']").click(addSeries);
});

$(function() {
    $("button[name='remove']").click(removeSeries);
});

function addSeries() {
    $(this).siblings("input").removeAttr("hidden");
    $(this).siblings("select").removeAttr("hidden");
    $(this).parent().append("<button name='remove' type='button'>-</button>");
    $(this).remove();
}

function removeSeries() {
    console.log($(this)); //nothing logged
    console.log($(this).siblings("input")); //nothing logged
    console.log($(this).siblings("select")); //nothing logged
    $(this).siblings("input").attr("hidden");
    $(this).siblings("select").attr("hidden");
    $(this).parent().append("<button name='add' type='button'>+</button>");
    $(this).remove();
}
<html>

<head>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>
</head>

<body>
    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
            <option disabled selected>Chart Type</option>
            <option value="1">Column</option>
            <option value="2">Line</option>
            <option value="4">Stacked Column</option>
            <option value="5">Stacked Line</option>
        </select>
        <button name="add" type="button">+</button>
    </div>
    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
            <option disabled selected>Chart Type</option>
            <option value="1">Column</option>
            <option value="2">Line</option>
            <option value="4">Stacked Column</option>
            <option value="5">Stacked Line</option>
        </select>
        <button name="add" type="button">+</button>
    </div>
    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
            <option disabled selected>Chart Type</option>
            <option value="1">Column</option>
            <option value="2">Line</option>
            <option value="4">Stacked Column</option>
            <option value="5">Stacked Line</option>
        </select>
        <button name="add" type="button">+</button>
    </div>
    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
            <option disabled selected>Chart Type</option>
            <option value="1">Column</option>
            <option value="2">Line</option>
            <option value="4">Stacked Column</option>
            <option value="5">Stacked Line</option>
        </select>
        <button name="add" type="button">+</button>
    </div>
</body>

</html>

我对javascript的使用不太满意，所以我可能缺少一些简单的东西。

感谢您的帮助，谢谢！

1 个答案:

答案 0 :(得分：2)

您尝试将事件附加到将来的元素上，可以使用$（document）
来实现 试试这个希望对你有帮助的

$(function() {
    $(document).on("click","button[name='add']",addSeries);
});

$(function() {
    $(document).on("click","button[name='remove']",removeSeries);
});

function addSeries() {
  $(this).parent().find("input,select").removeAttr("hidden");
  $(this).attr("name","remove").html("-");
}

function removeSeries() {
  $(this).parent().find("input,select").attr("hidden","");
  $(this).attr("name","add").html("+");
}
<html>

<head>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>
</head>

<body>
    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
            <option disabled selected>Chart Type</option>
            <option value="1">Column</option>
            <option value="2">Line</option>
            <option value="4">Stacked Column</option>
            <option value="5">Stacked Line</option>
        </select>
        <button name="add" type="button">+</button>
    </div>
    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
            <option disabled selected>Chart Type</option>
            <option value="1">Column</option>
            <option value="2">Line</option>
            <option value="4">Stacked Column</option>
            <option value="5">Stacked Line</option>
        </select>
        <button name="add" type="button">+</button>
    </div>
    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
            <option disabled selected>Chart Type</option>
            <option value="1">Column</option>
            <option value="2">Line</option>
            <option value="4">Stacked Column</option>
            <option value="5">Stacked Line</option>
        </select>
        <button name="add" type="button">+</button>
    </div>
    <div class="col-sm-12 hidden-xs-down d-flex justify-content-around" style="margin: 2px; padding: 0px;">
        <input name="segment-title-4" class="chart-segment-select" required placeholder="Label" hidden>
        <select name="chart-type-4" class="chart-segment-select" style="width: 35%;" required hidden>
            <option disabled selected>Chart Type</option>
            <option value="1">Column</option>
            <option value="2">Line</option>
            <option value="4">Stacked Column</option>
            <option value="5">Stacked Line</option>
        </select>
        <button name="add" type="button">+</button>
    </div>
</body>

</html>

相关问题
最新问题