使用JQuery設置HTML屬性

我正在使用JQuery，Modernizr和Angular的組合來實現通過ng-repeat生成的表的自定義Datepicker解決方案。如果我將「datepicker」的Angular指令硬編碼到HTML，解決方案工作。使用JQuery設置HTML屬性

因此，舉例來說，在我的表使用ng-repeat"revenue in runway.revenues"這個工程：

<td> 
    <input type="date" class="form-control" ng-model="revenue.date" placeholder="YYYY-MM-DD" datepicker required/> 
</td>

但我想這隻能付諸實施，當用戶在需要它的瀏覽器。因此，考慮到這一點，我從上面的HTML刪除datepicker，並在JS寫成這樣：

$(function() { 
     var nativeDateInputIsSupported = Modernizr.inputtypes.date; 
     if (!nativeDateInputIsSupported) { 
      $('input[type="date"]').prop("datepicker", true) 
     } 
    });

然而，當我降落在Firefox網頁上，它不會出現工作。

此外，如果我嘗試通過執行諸如console.log($('input[type="date"]').prop("class"))之類的操作進行調試，則返回的值將是undefined（應該是form-control）。

任何提示將不勝感激！

來源

2017-09-27 Alex Gelinas

我不確定主要問題，因爲我在角度＆modernizr最少的經驗，但最後一個應該是：''console.log（$（'input [type =「date」]'）。attr（「class」））'或'console.log（$（'input [type =「date」]'）。prop 「className」））' –

使用'.attr（）'在HTML – guest271314

@TaufikNurRahmanda上設置屬性，我也試過這些，都沒有工作（仍然返回undefined）。對於來賓朋友來說，這是行不通的。我做了.attr（「datepicker」，「」），它什麼都不做。另外，截至9月份，根據其他一些Stack Overflow用戶，這似乎不適用於JQuery。 –

我能夠通過從user @ guest271314獲取一個想法並擴展它來獲得此工作！

而不是將該屬性添加到基於Modernizr的HTML，我設置$ scope變量等於一個布爾值。

$(function() { 
     var nativeDateInputIsSupported = Modernizr.inputtypes.date; 
     if (!nativeDateInputIsSupported) { 
      $scope.datePickerValue = "true" 
     } 
    });

在我的指導，我加了這一點：

function link(scope, element, attrs, controller) { 
     var requiredParam = attrs.datepicker === 'true'; //This was what was added 
     if (requiredParam) { //Checking for boolean value 
      element.datepicker({ 
       dateFormat: "yy-mm-dd", 
       maxDate: '0' 
      }); 
     } 
    }

這意味着在我的HTML我加datepicker="{{datePickerValue}}"的日期輸入，現在的作品！謝謝你的所有幫助，我不會回來沒有你的輸入=）

來源

2017-09-27 02:30:28

使用.attr()或.setAttribute()在HTML

document.querySelector("input").setAttribute("datepicker", true); 
 

 
console.log(document.querySelector("input").outerHTML);

<input type="text">

$("input").attr("datepicker", true); 
 

 
console.log($("input")[0].outerHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<input type="text">

$("input").prop("datepicker", true); 
 

 
console.log($("input")[0].outerHTML); // attribute not set at HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<input type="text">

集屬性

來源

2017-09-27 01:36:36 guest271314

這似乎不適用於我。請記住，此表上有7個不同的輸入（爲簡潔起見，我只包含日期），因此我爲什麼使用''input [type =「date」]''。另外，在HTML中它不應該是'datepicker =「true」'，它應該只是'datepicker'（就像在頂部的HTML例子中，或者如果你使用'required'作爲輸入）。這就是爲什麼我使用'prop（'datepicker'，true）'。 –

@AlexGelinas你能描述「似乎沒有工作」？在使用正確選擇器的情況下是否應該發生一個或多個''元素相同的結果。爲什麼在HTML中只有'datepicker'屬性沒有預期的結果值？ – guest271314

「似乎沒有工作」，因爲沒有效果。 'datepicker'屬性是我在Angular中創建的一個指令，如最初的問題中提到的那樣=）我已經給出了一個HTML代碼的頂層代碼塊的例子。 –

使用JQuery設置HTML屬性

回答

相關問題