Question

请你看看上面的演示，让我知道为什么我无法抓住第一个最近的.val()元素的.txtfilename。

请尝试点击 PDF btn查看结果

 $(document).on("click", ".pdf-download", function(){
        var targetFileInput =  $(this).prev().closest(".txtfilename").val();
        alert(targetFileInput);
 });

HTML：

<div class="content hide">
    <div class="form-group">
        <input id="" name="txtfilename" type="text" placeholder="File Name" class="form-control input-md txtfilename" />
    </div>
    <div class="form-group" style="margin-top:10px !important;">
        <div class="btn-group btn-group-sm">
            <button type="button" id="chart1png" data-chart="chart1" class="btn btn-default text-center png-download">PNG</button>
            <button type="button" id="chart1pdf" data-chart="chart1" class="btn btn-default text-center pdf-download">PDF</button>
            <button type="button" id="chart1jpg" data-chart="chart1" class="btn btn-default text-center jpg-download">JPG</button>
        </div>
    </div>
</div>

由于

Answer 1

您有不正确的选择器来定位所需的输入元素。使用方法：

 $(document).on("click", ".pdf-download", function(){
    var targetFileInput =  $(this).closest('.form-group').prev().find(".txtfilename").val();
    alert(targetFileInput);
 });

<强> Working Demo

您也可以使用：

$(this).closest('.content').find(".txtfilename").val();

<强> Approach 2 demo

关于使用类名定位第一个上一个最近的元素的问题

1 个答案: