javascript - 我如何在点击函数中定位span的字符串？

Question

我尝试在代码中捕获“横幅名称”。

<div class = 'pdf-area'>
    <ul class = 'pdf list'>
        <li>
            <a href="#" onclick="javascript:pdfDownload('/pdf_name/spec_name.pdf'); return false;"><span class="icon-left"></span> 'banner name'</a>

        </li>
   </ul>
</div>

这是我的尝试。

$("div.pdf-area ul a").click(function(i) {
    var txt = $(i.target).text();
    console.log(txt);
});

当我运行此代码时，我没有得到我想要的值。

如何提取“baaner name”？

(href= # -> 这不是我的代码，并且没有任何可以修改此代码的权限。我只能在这种情况下提取值。)

Answer 1

您不需要使用选择器添加点击事件。只需将 this 作为第一个参数传递即可。然后在函数内部对该对象使用 find() 来定位 span。

尝试以下操作:

function pdfDownload(el, link){
  var name = $(el).find('span.icon-left').text();
  console.log(name);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'pdf area'>
  <ul class = 'pdf list'>
    <li>
      <a href="#" onclick="javascript:pdfDownload(this, '/pdf_name/spec_name.pdf'); return false;"><span class="icon-left"> 'banner name'</span></a>
    </li>
 </ul>
</div>

或者:如果您不想更改 HTML

$(".pdfarea > ul a > span").click(function() {
    var txt = $(this).text();
    console.log(txt);
});
function pdfDownload(){}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'pdfarea'>
  <ul class = 'pdflist'>
    <li>
      <a href="#" onclick="javascript:pdfDownload('/pdf_name/spec_name.pdf'); return false;"><span class="icon-left"> 'banner name'</span></a>
    </li>
 </ul>
</div>

如果横幅名称在 span 之外，请尝试以下操作:

$("div.pdf-area ul a").click(function() {
    var txt = $(this).text();
    console.log(txt);
});

function pdfDownload(){}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'pdf-area'>
  <ul class = 'pdf list'>
    <li>
      <a href="#" onclick="javascript:pdfDownload('/pdf_name/spec_name.pdf'); return false;"><span class="icon-left"></span> 'banner name'</a>

    </li>
 </ul>
</div>