如何在没有 ID 和 Class 的情况下检查 Span 内的文本答案

【问题标题】：How to check what text inside Span without ID and Class如何在没有 ID 和 Class 的情况下检查 Span 内的文本
【发布时间】：2019-02-25 12:03:05
【问题描述】：

我有这个插件生成的代码，我想捕获点击事件并确定点击了哪个特定链接。

<div id="table_1_wrapper" class="wpDataTables wpDataTablesWrapper">
<div class="dt-buttons">
    <a class="dt-button new_table_entry DTTT_button DTTT_button_new" tabindex="0" aria-controls="table_1" href="#"><span>New entry</span></a>
    <a class="dt-button edit_table DTTT_button DTTT_button_edit" tabindex="0" aria-controls="table_1" href="#"><span>Edit</span></a>
</div>

我能够使用下面的代码捕获点击事件，我现在的问题是检查被点击的 Anchor 标记的 Span 内的文本是什么，以便我可以根据点击的链接执行代码。

    document.addEventListener('click', function(e) {
    var tre = e.target.closest('a').href || '';
    console.log('Clicked');
    }, false);

【问题讨论】：

您将此问题标记为 jquery，那您为什么不使用它呢？
如果你做$('.DTTT_button_new').click();和$('.DTTT_button_edit').click()很容易

标签： javascript jquery

【解决方案1】：

在 jQuery/javascript 中，您可以通过 onClick 事件获取：

 $(document).on('click', '.dt-button', function (e) {
     // you can perform click event on DTTT_button class 
        // get text of clicked element
        var clicked_href_val = $(this).text();
        console.log(clicked_href_val); // print value

       //var clicked_href_val = $(this).attr('href');
     // you can get other parameters(like aria-controls, tabindex whatever defined) of clicked element
    });

希望对你有帮助。

【讨论】：

【解决方案2】：

试试这个，它应该对你有帮助。

<div id="table_1_wrapper" class="wpDataTables wpDataTablesWrapper">
    <div class="dt-buttons">
        <a class="dt-button new_table_entry DTTT_button DTTT_button_new" tabindex="0" aria-controls="table_1" href="#"><span>New entry</span></a>
        <a class="dt-button edit_table DTTT_button DTTT_button_edit" tabindex="0" aria-controls="table_1" href="#"><span>Edit</span></a>
    </div>
</div>
<script>
    document.addEventListener('click', function (e) {
        var mtar = e.target.closest('a'); 
        var tre = e.target.closest('a').href || '';
        console.log('Clicked' + mtar.innerHTML);
    }, false);
</script>

【讨论】：

【解决方案3】：

您可以使用 this 关键字发送元素 onclick。

function a(e)
{
console.log($(e).attr('href'))
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table_1_wrapper" class="wpDataTables wpDataTablesWrapper">
<div class="dt-buttons">
    <a class="dt-button new_table_entry DTTT_button DTTT_button_new" tabindex="0" aria-controls="table_1" href="#a" onclick="a(this)"><span>New entry</span></a>
    <a class="dt-button edit_table DTTT_button DTTT_button_edit" tabindex="0" aria-controls="table_1" href="#b" onclick="a(this)"><span>Edit</span></a>
</div>

【讨论】：

【解决方案4】：

试试这个，它会给你准确的文字。

<div id="table_1_wrapper" class="wpDataTables wpDataTablesWrapper">
    <div class="dt-buttons">
        <a class="dt-button new_table_entry DTTT_button DTTT_button_new" tabindex="0" aria-controls="table_1" href="#"><span>New entry</span></a>
        <a class="dt-button edit_table DTTT_button DTTT_button_edit" tabindex="0" aria-controls="table_1" href="#"><span>Edit</span></a>
    </div>
</div>
<script>
    document.addEventListener('click', function (e) {
        var mtar = e.target.closest('span'); 
        var tre = e.target.closest('a').href || '';
        console.log('Clicked Text: ' + mtar.innerHTML);
    }, false);
</script>

【讨论】：

【解决方案5】：

您可以使用hasClass() 轻松检查a 标签上的类，例如：

$(this).hasClass('DTTT_button_new')

下面是从点击的元素及其href中获取文本的演示：

$('body').on('click', '.dt-buttons a', function(e) {
  e.preventDefault();
  console.log($(this).text(), $(this).prop('href'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table_1_wrapper" class="wpDataTables wpDataTablesWrapper">
  <div class="dt-buttons">
    <a class="dt-button new_table_entry DTTT_button DTTT_button_new" tabindex="0" aria-controls="table_1" href="https://add_new_entry"><span>New entry</span></a>
    <a class="dt-button edit_table DTTT_button DTTT_button_edit" tabindex="0" aria-controls="table_1" href="https://edit_link"><span>Edit</span></a>
  </div>

【讨论】：