JQuery onclick отображает значение Textbox в тексте абзаца

Question

Я хочу отобразить значение из текстового поля в тексте абзаца. Мои P-теги имеют уникальные идентификаторы в форме Data attr. После нажатия кнопки я хочу обновить только текст, кнопка которого принадлежит этому идентификатору. Я пытался, но весь текст параграфа обновляется.

Абзац 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>

.

заменить это

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

-> в вашем случае $("p" + selectedInputId) вернуть тег p1, например

до

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