jQuery的更改占位符属性值

Question

我有这张桌子

 $(document).ready(function() { $('#f05_0002').change(function() { if ($("#f05_0002").val() == "OFF TRACK") { $("#f06_0002").attr("placeholder", "Please state what's not achieved, recommendations to be achieved"); }; if ($("#f05_0002").val() == "ON TRACK") { $("#f06_0002").attr("placeholder", "Please state the exact achievement"); }; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <table class="t-Report-report" summary="S1 - 2017"> <thead> <tr> <th class="t-Report-colHead" align="center" id="JAN_WEEK1_STATUS">Status</th> <th class="t-Report-colHead" align="center" id="JAN_WEEK1">Week</th> </tr> </thead> <tbody> <tr> <td class="t-Report-cell" headers="JAN_WEEK1_STATUS"> <label for="f05_0002" id="f05_0002_LABEL" class="u-VisuallyHidden"></label> <select name="f05" class="u-TF-item u-TF-item--select " id="f05_0002"> <option value="" selected="selected"></option> <option value="OFF TRACK" >Off Track</option> <option value="ON TRACK" >On Track</option> </select> </td> <td class="t-Report-cell" headers="JAN_WEEK1"> <label for="f06_0002" id="f06_0002_LABEL" class="u-VisuallyHidden"></label> <textarea name="f06" rows="15" cols="35" wrap="VIRTUAL" class="u-TF-item u-TF-item--textarea " id="f06_0002"></textarea> </td> </tr> <tr> <td class="t-Report-cell" headers="JAN_WEEK1_STATUS"> <label for="f05_0003" id="f05_0003_LABEL" class="u-VisuallyHidden"></label> <select name="f05" class="u-TF-item u-TF-item--select " id="f05_0003"> <option value="" selected="selected"></option> <option value="OFF TRACK" >Off Track</option> <option value="ON TRACK" >On Track</option> </select> </td> <td class="t-Report-cell" headers="JAN_WEEK1"> <label for="f06_0003" id="f06_0003_LABEL" class="u-VisuallyHidden"></label> <textarea name="f06" rows="15" cols="35" wrap="VIRTUAL" class="u-TF-item u-TF-item--textarea " id="f06_0003"></textarea> </td> </tr> <tr> <td class="t-Report-cell" headers="JAN_WEEK1_STATUS"> <label for="f05_0004" id="f05_0004_LABEL" class="u-VisuallyHidden"></label> <select name="f05" class="u-TF-item u-TF-item--select " id="f05_0004"> <option value="" selected="selected"></option> <option value="OFF TRACK" >Off Track</option> <option value="ON TRACK" >On Track</option> </select> </td> <td class="t-Report-cell" headers="JAN_WEEK1"> <label for="f06_0004" id="f06_0004_LABEL" class="u-VisuallyHidden"></label> <textarea name="f06" rows="15" cols="35" wrap="VIRTUAL" class="u-TF-item u-TF-item--textarea " id="f06_0004"></textarea> </td> </tr> 

我想要实现的是，当我更改“状态”的值时，它会更新一周的占位符attr值，我尝试了此代码，但发现我必须为每一行重复此操作，这不是一个好主意

Answer 1

一种实现方法是使用$('select[id^="f05_000"]') 。

它将选择id以f05_000开头的所有select 。

然后，我们可以获得var id = $(this).attr("id").split('_')[1]的id的最后一部分（000＃）

最后选择带有$("#f06_" + id)的文本区域

 $(document).ready(function() { $('select[id^="f05_000"]').change(function() { var id = $(this).attr("id").split('_')[1]; if ($(this).val() == "OFF TRACK") { $("#f06_" + id).attr("placeholder", "Please state what's not achieved, recommendations to be achieved"); }; if ($(this).val() == "ON TRACK") { $("#f06_" + id).attr("placeholder", "Please state the exact achievement"); }; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="t-Report-report" summary="S1 - 2017"> <thead> <tr> <th class="t-Report-colHead" align="center" id="JAN_WEEK1_STATUS">Status</th> <th class="t-Report-colHead" align="center" id="JAN_WEEK1">Week</th> </tr> </thead> <tbody> <tr> <td class="t-Report-cell" headers="JAN_WEEK1_STATUS"> <label for="f05_0002" id="f05_0002_LABEL" class="u-VisuallyHidden"></label> <select name="f05" class="u-TF-item u-TF-item--select " id="f05_0002"> <option value="" selected="selected"></option> <option value="OFF TRACK" >Off Track</option> <option value="ON TRACK" >On Track</option> </select> </td> <td class="t-Report-cell" headers="JAN_WEEK1"> <label for="f06_0002" id="f06_0002_LABEL" class="u-VisuallyHidden"></label> <textarea name="f06" rows="15" cols="35" wrap="VIRTUAL" class="u-TF-item u-TF-item--textarea " id="f06_0002"></textarea> </td> </tr> <tr> <td class="t-Report-cell" headers="JAN_WEEK1_STATUS"> <label for="f05_0003" id="f05_0003_LABEL" class="u-VisuallyHidden"></label> <select name="f05" class="u-TF-item u-TF-item--select " id="f05_0003"> <option value="" selected="selected"></option> <option value="OFF TRACK" >Off Track</option> <option value="ON TRACK" >On Track</option> </select> </td> <td class="t-Report-cell" headers="JAN_WEEK1"> <label for="f06_0003" id="f06_0003_LABEL" class="u-VisuallyHidden"></label> <textarea name="f06" rows="15" cols="35" wrap="VIRTUAL" class="u-TF-item u-TF-item--textarea " id="f06_0003"></textarea> </td> </tr> <tr> <td class="t-Report-cell" headers="JAN_WEEK1_STATUS"> <label for="f05_0004" id="f05_0004_LABEL" class="u-VisuallyHidden"></label> <select name="f05" class="u-TF-item u-TF-item--select " id="f05_0004"> <option value="" selected="selected"></option> <option value="OFF TRACK" >Off Track</option> <option value="ON TRACK" >On Track</option> </select> </td> <td class="t-Report-cell" headers="JAN_WEEK1"> <label for="f06_0004" id="f06_0004_LABEL" class="u-VisuallyHidden"></label> <textarea name="f06" rows="15" cols="35" wrap="VIRTUAL" class="u-TF-item u-TF-item--textarea " id="f06_0004"></textarea> </td> </tr> 

Answer 2

假设您的行结构<tr>是相同的，则可以在下面的通用代码中尝试使用class而不是id ：

$(document).ready(function() {
    $('.u-TF-item--select').change(function() {

        if ($(this).val() =="OFF TRACK") {
            //find the parent tr and then look for element with class u-TF-item--textarea
            $(this).closest("tr").find(".u-TF-item--textarea").attr("placeholder","Please state what's not achieved, recommendations to be achieved");
        };

        if ($(this).val() =="ON TRACK") {
            $(this).closest("tr").find(".u-TF-item--textarea").attr("placeholder","Please state the exact achievement");
        };

    });

});

Answer 3

无需重复代码，只需编写这样的通用代码即可。我们可以像这样遍历DOM元素$(this).closest("tr").find('textarea').attr("placeholder")

 $(document).ready(function() { $('select').change(function() { if ($(this).val() =="OFF TRACK") { $(this).closest("tr").find('textarea').attr("placeholder","Please state what's not achieved, recommendations to be achieved"); } if ($(this).val() =="ON TRACK") { $(this).closest("tr").find('textarea').attr("placeholder","Please state the exact achievement"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="t-Report-report" summary="S1 - 2017"> <thead> <tr> <th class="t-Report-colHead" align="center" id="JAN_WEEK1_STATUS" >Status</th> <th class="t-Report-colHead" align="center" id="JAN_WEEK1" >Week</th> </tr> </thead> <tbody> <tr> <td class="t-Report-cell" headers="JAN_WEEK1_STATUS"> <label for="f05_0002" id="f05_0002_LABEL" class="u-VisuallyHidden"></label> <select name="f05" class="u-TF-item u-TF-item--select " id="f05_0002"> <option value="" selected="selected"></option> <option value="OFF TRACK" >Off Track</option> <option value="ON TRACK" >On Track</option> </select> </td> <td class="t-Report-cell" headers="JAN_WEEK1"> <label for="f06_0002" id="f06_0002_LABEL" class="u-VisuallyHidden"></label> <textarea name="f06" rows="15" cols="35" wrap="VIRTUAL" class="u-TF-item u-TF-item--textarea " id="f06_0002"></textarea> </td> </tr> <tr> <td class="t-Report-cell" headers="JAN_WEEK1_STATUS"> <label for="f05_0003" id="f05_0003_LABEL" class="u-VisuallyHidden"></label> <select name="f05" class="u-TF-item u-TF-item--select " id="f05_0003"> <option value="" selected="selected"></option> <option value="OFF TRACK" >Off Track</option> <option value="ON TRACK" >On Track</option> </select> </td> <td class="t-Report-cell" headers="JAN_WEEK1"> <label for="f06_0003" id="f06_0003_LABEL" class="u-VisuallyHidden"></label> <textarea name="f06" rows="15" cols="35" wrap="VIRTUAL" class="u-TF-item u-TF-item--textarea " id="f06_0003"></textarea> </td> </tr> <tr> <td class="t-Report-cell" headers="JAN_WEEK1_STATUS"> <label for="f05_0004" id="f05_0004_LABEL" class="u-VisuallyHidden"></label> <select name="f05" class="u-TF-item u-TF-item--select " id="f05_0004"> <option value="" selected="selected"></option> <option value="OFF TRACK" >Off Track</option> <option value="ON TRACK" >On Track</option> </select> </td> <td class="t-Report-cell" headers="JAN_WEEK1"> <label for="f06_0004" id="f06_0004_LABEL" class="u-VisuallyHidden"></label> <textarea name="f06" rows="15" cols="35" wrap="VIRTUAL" class="u-TF-item u-TF-item--textarea " id="f06_0004"></textarea> </td> </tr> <tbody> </table>