javascript - jQuery .data() 值中包含空格的问题

Question

很多问题都与此类似，但我真的不明白我做错了什么。

所以我传递了具有以下形式的开放 Bootstrap 模式:

    <form>
      VIN: <br>
      <input type="text" id="updateVin" name="updateVin" value="">
      <br>
      Description: <br>
      <input type="text" id="updateDescription" name="updateDescription" value="">
      <br>
      Color: <br>
      <input type="text" id="updateColor" name="updateColor" value="">
      <br>
      Model: <br>
      <input type="text" id="updateModel" name="updateModel" value="">
      <br>
      Area ID: <br>
      <input type="text" id="updateAreaId" name="updateAreaId" value="">
      <br>
      Geofence ID: <br>
      <input type="text" id="updateGeofenceId" name="updateGeofenceId" value="">
      <br>
      <button class="btn btn-warning" id="updateVehicle">Update</button>
      &nbsp;
      <button class="btn btn-danger" id="deleteVehicle"> 
      Delete 
      </button>
   </form>

我想将同一模态的不同链接的输入值设置为不同的值。

我是这样实现的:

$(document).on("click", ".open-UpdateModal", function () {
        var vin = $(this).data('vin');
        var description = $(this).data('description');
        var color = $(this).data('color');
        var model = $(this).data('model');
        var areaId = $(this).data('areaid');
        var geofenceId = $(this).data('geofenceid');
        $(".update #updateVin").val( vin );
        $(".update #updateDescription").val( description );
        $(".update #updateColor").val( color );
        $(".update #updateModel").val( model );
        $(".update #updateAreaId").val( areaId );
        $(".update #updateGeofenceId").val( geofenceId );
        $('h4.modal-title').text( 'Updating ' + vin + ':');
    });

我正在从我的一个表中的表数据获取值:

<td>
    <a data-toggle="modal" href="#my_modal" class="open-UpdateModal"
    data-deletevin=<%= vehicles[i].vin %>
    data-vin=<%= vehicles[i].vin %> 
    data-description=<%= vehicles[i].description %> 
    data-color=<%= vehicles[i].color %> 
    data-model=<%= vehicles[i].model %> 
    data-areaid=<%= vehicles[i].areaId %> 
    data-geofenceid=<%= vehicles[i].geofenceId %>>
    <%= vehicles[i].vin %> </a>
</td>

这很完美!除此之外，如果数据描述等于“Toyota Rav4”，则输入值将仅为“Toyota”。除此之外，这很完美。

这是 jQuery 和空格的问题吗？还是我做错了什么？

我也尝试过使用 $(this).attr('data-description') 。

Answer 1

只需在值周围添加引号:

<a data-toggle="modal" href="#my_modal" class="open-UpdateModal"
data-deletevin="<%= vehicles[i].vin %>"
data-vin="<%= vehicles[i].vin %>"
data-description="<%= vehicles[i].description %>" 
data-color="<%= vehicles[i].color %>" 
data-model="<%= vehicles[i].model %>" 
data-areaid="<%= vehicles[i].areaId %>"
data-geofenceid="<%= vehicles[i].geofenceId %>">
<%= vehicles[i].vin %> </a>