無法通過jQuery

我想要的屬性通過這個代碼添加到我的輸入元素添加屬性，HTML元素：如果我加載我的網頁，並期待在源，我看到我的元素無法通過jQuery

$(document).ready(function(e) { 
    $.each({ 
     "bmsw": 4, "dp": 1, "jmsw": 2, "mhsw": 4, "mp": 5, 
     "pr": 10, "prrv": 3, "sh": 2, "st": 10, "sw": 2, 
     "swrv": 1, "ud": 1 
    }, function(key, value) { 
     $('#' + key).prop('data-point-value', value); 
    }); 
});

與上面列表中顯示的名稱和ID。雖然沒有設置數據點值屬性。我試過使用prop和attr，但他們都沒有看到將該屬性添加到HTML中。

我在做什麼錯？

如果它很重要，這個元素就是四個div，一個表格，一個表格和一個td元素。

來源

2013-08-01 Gargoyle

如果我加載我的頁面並查看源代碼，我會看到上面列表中顯示的名稱和ID的元素。雖然沒有設置數據點值屬性。我試過使用prop和attr，但他們都沒有看到將該屬性添加到HTML中。

attr是正確的東西用於設置元素的data-*屬性。

如果您使用「查看源文件」或類似的元素來查看，你正在做的更改客戶端將不會顯示。「查看源文件」顯示，因爲它是從服務器下發的頁面的源代碼（通常情況下，它可以追溯到到服務器並重新檢索的頁面，其實）。「查看源文件」不不告訴你的DOM的當前狀態。您需要使用您的瀏覽器的live DOM查看器。在Chrome，FireBug和IE的開發工具中，這通常是一個「DOM」選項卡或類似的選項。

如果使用attr在代碼：

$(document).ready(function(e) { 
    $.each({ 
     "bmsw": 4, "dp": 1, "jmsw": 2, "mhsw": 4, "mp": 5, 
     "pr": 10, "prrv": 3, "sh": 2, "st": 10, "sw": 2, 
     "swrv": 1, "ud": 1 
    }, function(key, value) { 
     $('#' + key).attr('data-point-value', value); 
    }); 
});

然後用id"bmsw"元素將獲得data-point-value屬性與價值"4"，與id"dp"元素將獲得價值"1"，等等上。

無償完成示例：Live Copy | Live Source

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>Setting Data Attributes</title> 
    <style> 
    span { 
     border: 1px solid grey; 
     padding: 0 2px; 
     cursor: pointer; 
    } 
    </style> 
</head> 
<body> 
    <p>Each of the below is an element with an <code>id</code> matching its text. Click the element to see the value of its <code>data-point-value</code> attribute.</p> 
    <p> 
    <span id="bmsw">bmsw</span> 
    <span id="dp">dp</span> 
    <span id="jmsw">jmsw</span> 
    <span id="mhsw">mhsw</span> 
    <span id="mp">mp</span> 
    <span id="pr">pr</span> 
    <span id="prrv">prrv</span> 
    <span id="sh">sh</span> 
    <span id="st">st</span> 
    <span id="sw">sw</span> 
    <span id="swrv">swrv</span> 
    <span id="ud">ud</span> 
    </p> 
    <p id="output"></p> 
    <script> 
    (function() { 
     $(document).ready(function(e) { 
      $.each({ 
       "bmsw": 4, "dp": 1, "jmsw": 2, "mhsw": 4, "mp": 5, 
       "pr": 10, "prrv": 3, "sh": 2, "st": 10, "sw": 2, 
       "swrv": 1, "ud": 1 
      }, function(key, value) { 
       $('#' + key).attr('data-point-value', value); 
      }); 
     }); 

     $(document).on("click", "span", function() { 
     var value = $(this).attr("data-point-value"); 
     $("#output").html(
      "The value of <code>" + 
      this.id + 
      "</code>'s <code>data-point-value</code> is <code>" + 
      value + 
      "</code>" 
     ); 
     }); 
    })(); 
    </script> 
</body> 
</html>

來源

2013-08-02 09:09:18

謝謝你的解釋！我轉而使用IE瀏覽器而不是Safari瀏覽器，然後通過開發人員部分查看添加的屬性。 – Gargoyle

@Gargoyle：很好！很高興這有幫助。 Safari也有[開發工具]（http://developer.apple.com/library/safari/#documentation/AppleApplications/Conceptual/Safari_Developer_Guide/2SafariDeveloperTools/SafariDeveloperTools.html）。 –

使用

$('#' + key).attr('data-point-value', value);

這裏有一個DEMO：http://jsfiddle.net/balexandre/uKw25/

enter image description here

而attr獲取和設置的是什麼屬性元素，independet，並且總是返回字符串，prop get的布爾條件，例如樂：

<input type="checkbox" value="Yes" checked />

$(elem).prop("checked")將返回true而$(elem).attr("checked")一個布爾值將返回字符串"checked"

設定值時，這是一樣的：

$(elem).prop("checked", true)將標誌着該複選框爲真，但使用attr您需要編寫$(elem).attr("checked", "checked")。

我希望這能讓你清楚地看到爲什麼你的代碼不能正常工作......因爲你正在使用prop，但沒有設置任何布爾值，因爲它是方法所期望的。下面

來源

2013-08-01 22:56:49 balexandre

請注意，使用'data'實際上不會將信息放在元素本身上。這可能無關緊要（如果它只能通過'data'從jQuery訪問），但如果要以其他方式查找這些信息，這很重要。 –

是true，它附加到元素DOM，只能使用jQuery進行操作。 – balexandre

*「'prop'僅用於獲取屬性值，不用於設置它們的值。*」這只是不完全正確。像'attr'一樣，'prop'用於設置屬性。只是不屬性。 –

使用：

$('#' + controlID).attr('data-controlValue', value);

或者，

$('#' + controlID).data('controlValue', value);

我希望它能幫助。

來源

2013-08-01 23:14:45 maverickosama92

無法通過jQuery

回答

相關問題