javascript - 在使用 json 进行 ajax 响应后将 addClass 添加到某个 id

Question

我想通过 addClass 将类应用到具有特定 id 的元素。这是由 ajax 以 json 格式返回的。

js

$(document).on('blur', '.autosave', function(e) { 
    e.preventDefault();
  $.ajax({
    type: 'POST',
    url: 'inc/products_autosave.php',
    data: {
        id: $(this).prop('id'),
        val: $(this).val()
    },
    dataType:'json',
    success: function(resp) {
        console.log(resp); //debug
        if(resp.sql=='ok'){
            $('#'+resp.id).addClass('has-success animate bounce');
            alert(resp.sql+' - '+id);
        }else{
            alert(resp.sql+' - '+id);
        }
    }
  });
});

json

{sql: "ok", id: "prd_title_en|3"}

html

<tr id="3">
    <td>00003</td>
    <td><input type="text" name="prd_cde" id="prd_cde|3" class="form-control autosave" value="3000002" /></td>
    <td><input type="text" name="prd_title_en" id="prd_title_en|3" class="form-control autosave" value="FULL DAY CITY TOUR WITH LUNCH (6 PERSON)" /></td>
    <td><input type="text" name="prd_title_th" id="prd_title_th|3" class="form-control autosave" value="xxx" /></td>
    <td><input type="number" name="prd_cost" id="prd_cost|3" class="form-control autosave" value="900" /></td>
    <td><input type="checkbox" class="autosave" name="prd_rcm" id="prd_rcm|3" value="1" data-toggle="toggle" data-size="mini" data-onstyle="success" data-on="Yes" data-off="No"/></td>
    </tr>

理想情况下，我想将类 has-success、animate 和 bounce 添加到输入 #prd_title_en|3。但它一直说 Uncaught Error: Syntax error, unrecognized expression: #prd_title_en|3

Answer 1

问题是由于 | 字符引起的。来自 jQuery 文档:

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes http://api.jquery.com/category/selectors/

要添加转义字符，您可以使用 replace()，如下所示:

var resp = {
  sql: "ok",
  id: "prd_title_en|3"
}

if (resp.sql == 'ok') 
  $('#' + resp.id.replace('|', '\\|')).addClass('has-success animate bounce');
      
console.log(resp.sql + ' - ' + resp.id);

.has-success {
  color: #0C0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="3">
    <td>00003</td>
    <td><input type="text" name="prd_cde" id="prd_cde|3" class="form-control autosave" value="3000002" /></td>
    <td><input type="text" name="prd_title_en" id="prd_title_en|3" class="form-control autosave" value="FULL DAY CITY TOUR WITH LUNCH (6 PERSON)" /></td>
    <td><input type="text" name="prd_title_th" id="prd_title_th|3" class="form-control autosave" value="xxx" /></td>
    <td><input type="number" name="prd_cost" id="prd_cost|3" class="form-control autosave" value="900" /></td>
    <td><input type="checkbox" class="autosave" name="prd_rcm" id="prd_rcm|3" value="1" data-toggle="toggle" data-size="mini" data-onstyle="success" data-on="Yes" data-off="No" /></td>
  </tr>
</table>