如何在单击函数中锁定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的名字”？

(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>

​

如果不想更改或

​

$(".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>

​

Answer 2

<div class = 'pdf-area'>
    <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>

$(document).on('click','.pdflist a',function(){
      alert($(this).text());
})

以上单击事件将给出当前元素的文本。

小提琴：https://jsfiddle.net/gokulmaha/vt3b0keu/2/

Answer 3

您可以删除$("div.pdf-area ul a").click(function(i)..并创建pdfDownload函数，该函数将处理这两种情况

​

function pdfDownload(e, path) {
  console.log(path)
  e.preventDefault();
  var txt = $(e.target).text();
  console.log(txt);
};

<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="pdfDownload(event ,'/pdf_name/spec_name.pdf')"><span class="icon-left"> 'banner name'</span></a>

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

​