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

您不需要使用选择器来添加click事件。只需传递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>

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>

Answer 4

嗨，试试看-

 $("div.pdf-area ul a").click(function(i) {
            var txt = $("div.pdf-area > ul.list > li a span.icon-left").text();
            console.log(txt);
        });

如何在点击功能中定位跨度的字符串？

4 个答案: