使用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属性

回答

相关问题