Question

我正在尝试获取每个按钮的值，但我得到的是第一个按钮的值。这是我的内容

<div class="my_btn">
<button id="id_button" value="page-1">Page One</button>
<button id="id_button" value="page-2">Page Two</button>
<button id="id_button" value="page-3">Page Three</button>
<button id="id_button" value="page-4">Page Four</button>
</div>

这是我的脚本

jQuery('.my_btn').on('click',function(){
var my_content = jQuery('#id_button').val();
var my_link = '<li><a href="/'+my_content+'.php">Link</a></li>';

if( !tinyMCE.activeEditor || tinyMCE.activeEditor.isHidden()) {
jQuery('textarea#content').val(my_link);
} else {
tinyMCE.execCommand('mceInsertContent', false, my_link);
}
});

基本上这是一个wordpress功能。我正在尝试在textarea框中添加不同的链接。

提前致谢

Answer 1

将事件侦听器应用于按钮而不是包装器，然后使用this.value获取值。

jQuery('.my_btn button').on('click',function(){
    var my_content = this.value;
    var my_link = '<li><a href="/'+my_content+'.php">Link</a></li>';
    if( !tinyMCE.activeEditor || tinyMCE.activeEditor.isHidden()) {
        jQuery('textarea#content').val(my_link);
    } else {
       tinyMCE.execCommand('mceInsertContent', false, my_link);
    }
});

此外，您应该为每个id属性使用唯一值。虽然它不会影响此脚本，但如果您尝试按id选择，那么它只会影响带有id的第一个元素。

＆＃13;

jQuery('.my_btn button').on('click',function(){
    var my_content = this.value;
    alert(my_content);
    /*var my_link = '<li><a href="/'+my_content+'.php">Link</a></li>';
    if( !tinyMCE.activeEditor || tinyMCE.activeEditor.isHidden()) {
        jQuery('textarea#content').val(my_link);
    } else {
       tinyMCE.execCommand('mceInsertContent', false, my_link);
    }*/
});

＆＃13;

<div class="my_btn">
<button id="id_button_1" value="page-1">Page One</button>
<button id="id_button_2" value="page-2">Page Two</button>
<button id="id_button_3" value="page-3">Page Three</button>
<button id="id_button_4" value="page-4">Page Four</button>
</div>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

首先关闭id_button应该是一个类，因为它在多个元素上第二个你的第一个jquery命令应该是这样的，这样它将处理按钮点击并获得正确的值

jQuery('.my_btn').on('click', '.id_button',function(){
    var my_content = $(this).val();
    var my_link = '<li><a href="/'+my_content+'.php">Link</a></li>';

    if( !tinyMCE.activeEditor || tinyMCE.activeEditor.isHidden()) {
        jQuery('textarea#content').val(my_link);
    } else {
        tinyMCE.execCommand('mceInsertContent', false, my_link);
    }
});

jquery获取每个按钮的值

2 个答案: