如何使用 jquery 选择器选择 django 模板变量值的 id？答案

【问题标题】：how to use jquery selector to select id of django template variable value?如何使用 jquery 选择器选择 django 模板变量值的 id？
【发布时间】：2021-09-13 08:39:02
【问题描述】：

我有一个 django 网络应用程序。在 html 页面中，for 循环中的某些元素 id 使用了 django 模板变量值，因为在 for 循环中每一行都应该有不同的 id 值。

但是在下面的 jquery 中，当我尝试使用选择器时，无法选择 django 模板变量值（在我的情况下为 obj.title）。

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

{% for obj in query_results_book %}
<td>
                                <select name="keep_discard" id="keep_discard" onchange="GetVal(this)">
                                <option value="Keep">Keep</option>
                                <option value="Discard">Discard</option>
                            </select>
                            <select name="discard_reason" id="{{obj.title}}">
                                <option value="Change edition">Change edition</option>
                                <option value="Change to eTextbook">Change to eTextbook</option>
                                <option value="Change title">Change title</option>
                                <option value="No material required">No material required</option>
                            </select>
</td>
{%endfor%}

<script>
    
                function GetVal(obj){
    
                var index = obj.selectedIndex;
    
                if(index == 1){
                    $("#obj.title").show();
                }
                else{
                    $("#obj.title ").hide();
                }
            }

</script>

现在 js 脚本无法用于查询选择器，它没有选择我的元素。如何让 jquery 选择器选择一些 id，这是我的 django 模板变量值？

【问题讨论】：

欢迎来到 Stack Overflow！请访问help center、tour 以查看内容和How to Ask。做一些研究，搜索关于 SO 的相关主题；如果您遇到困难，请发布您尝试的minimal reproducible example，注意输入和预期输出，最好在Stacksnippet 中。请发布渲染的 HTML

标签： jquery django

【解决方案1】：

ID 必须是唯一的

只需委托 - 此代码不需要任何 ID

$("#tableId").on("change", "[name=keep_discard]", function() {
  $(this).closest("td").find("[name=discard_reason]").toggle(this.value === "Discard")
});

[name=discard_reason] { display: none }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableId">
  <tr>
    <td>
      <select name="keep_discard">
        <option value="Keep">Keep</option>
        <option value="Discard">Discard</option>
      </select>
      <select name="discard_reason">
        <option value="Change edition">Change edition</option>
        <option value="Change to eTextbook">Change to eTextbook</option>
        <option value="Change title">Change title</option>
        <option value="No material required">No material required</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <select name="keep_discard">
        <option value="Keep">Keep</option>
        <option value="Discard">Discard</option>
      </select>
      <select name="discard_reason">
        <option value="Change edition">Change edition</option>
        <option value="Change to eTextbook">Change to eTextbook</option>
        <option value="Change title">Change title</option>
        <option value="No material required">No material required</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <select name="keep_discard">
        <option value="Keep">Keep</option>
        <option value="Discard">Discard</option>
      </select>
      <select name="discard_reason">
        <option value="Change edition">Change edition</option>
        <option value="Change to eTextbook">Change to eTextbook</option>
        <option value="Change title">Change title</option>
        <option value="No material required">No material required</option>
      </select>
    </td>
  </tr>
</table>

【讨论】：