Question

我需要获取value元素的button属性的值，并将此值写入另一个模态。

我的PHP中有一个循环，它写了以下HTML：

<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="1">Confirm</button>
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="2">Confirm</button>
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="3">Confirm</button>

当我点击一个按钮时，它会显示一个带有两个按钮的模态，一个用于继续，一个用于取消。我希望存储＆＃34; {34}的value属性中第一个按钮的href属性的值。第二个模态中的按钮。

我的模态：

<div class="modal-body">
    <div class="text-center">
        <div class="i-circle danger"><i class="fa fa-times"></i></div>
        <h4>Are you sure?!</h4>
        <p>If yes click on Continue!</p>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <a href="IWANTGETIDHERE">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Continue</button>
            </a>
        </div>
    </div>
</div>

Here是我模态的演示。

Answer 1

使用jQuery：

$(document).ready(function() {
    $('.btn').click(function() {
        alert($(this).attr("value"));
    });
});

使用：

代替警报

$('.modal-footer a').attr("href", $(this).attr("value"));

请参阅JSFiddle

使用纯Javascript

document.getElementById('btn').onclick = function() {
    document.getElementById('link').setAttribute('href', this.value);
}

请参阅JSFiddle

Answer 2

button = document.getElementById("buttonID");
button.onclick = function(){
document.getElementsByClassName("class")[0].href =  document.getElementById("buttonID").value
}

如果您正在寻找无依赖性。

Answer 3

您可以尝试此操作，添加data-customId属性并从所有按钮中移除value：

<button data-customId="1" data-toggle="modal"  data-target="#mod-error" type="button" class="myclasses btn">Confirm</button>
<button data-customId="2" data-toggle="modal"  data-target="#mod-error" type="button" class="myclasses btn">Confirm</button>
<button data-customId="3" data-toggle="modal"  data-target="#mod-error" type="button" class="myclasses btn" >Confirm</button>

另外，在id添加modal div，例如：

<div id='confirmAction' class="modal-body">
    <!-- Markup -->
</div>

然后注册bootstrap show event的处理程序：

$('#confirmAction').on('show.bs.modal', function (e) {
    $id = $(e.relatedTarget).attr('data-customId'); // Get the customId
    $(this).find('a:first').attr('href', $id);
});

使用JavaScript获取按钮价值的最佳方式

3 个答案: