jquery更改占位符attr值

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"]')。

来实现此目的

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

然后我们可以使用id

获取var id = $(this).attr("id").split('_')[1]（000＃）的最后一部分

并最后用$("#f06_" + id)

选择textarea

$(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")

＆＃13;

＆＃13;

$(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");

  }

});
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;