Question

我想在段落文本中显示文本框中的值。我的P标签具有Data attr形式的唯一ID。单击按钮后，我只想更新其按钮属于该ID的文本。我尝试过，但是所有段落文本都得到更新。

段落HTML：

<div class="facilityContent">
<p data-levelid="1" data-locationid="1">This is an example of a multi-line ellipsis.This is an example of a multi-line ellipsisThis is an example of a multi-line ellipsisThis is an example of a multi-line ellipsisThis is an example of a multi-line ellipsis</p>
<a href="javascript:void(0);" class="editbtn">Edit</a>
</div>

按钮HTML

<div class="facilityContentBox" style="display: block;">
    <p>Facility Name</p>
    <input type="text" id="txtFacility1" class="facilityInputBox" style="width:100%;">
    <div class="facilityBtnBox">
        <a href="javascript:void(0)" class="cancelEdit pull-left">Cancel</a>
        <a href="javascript:void(0)" class="btn btn-default pull-right facilitySaveBtn">Save</a>
    </div>
</div>

JQuery

$(".facilitySaveBtn").click(function(){
    //debugger
        // alert("Clicked");
        var facilityInput = $(this).parent().siblings('input').val();
        var selectedInputId = $(this).parent().parent().siblings(".departmentContent").find("p").attr("data-locationid");
        //debugger
        $(".facilityContentBox").hide();
        $(".facilityContent").show();
        $(".editbtn").show();
        if (selectedInputId !== undefined) {
            $("p" + selectedInputId).text(facilityInput);
        }

    });

Answer 1

p1标签（p + selectedInputId）不存在。这就是为什么您的代码无法正常工作的原因。

您必须更改：

$("p" + selectedInputId).text(facilityInput);

收件人：

$("p[data-locationid="+selectedInputId+"]").text(facilityInput);

Answer 2

一旦您选择了“ data-locationid”的值，请在<p>选择器中使用该ID值

替换此

$("p" + selectedInputId).text(facilityInput);

->对于您的情况$("p" + selectedInputId)例如返回p1标记

到

$('p[data-locationid='+selectedInputId+']' ).text(facilityInput);

jQuery onclick在段落文本中显示文本框值

2 个答案: