如何为动态按钮创建动态ID？
[英]How to create a dynamic id for a dynamic button?
问题描述
I am able to create an onlick dynamic button with an incrementer and a decrementer option, but I am unable to create a dynamic id for other buttons due to which these buttons are not getting incremented or decremented. 
我能够创建带有增量器和减量器选项的onlick动态按钮，但是由于这些按钮没有增加或减少，因此我无法为其他按钮创建动态ID。 Currently only the first button gets decremented/incremented even when clicked on other buttons. 当前，即使单击其他按钮，也只有第一个按钮递减/递增。
When you click on + icon content and a incrementer/decrementer button is added in Manage Portfolio section. 当您单击+图标内容时，“管理投资组合”部分中将添加一个增量器/减量器按钮。 I have tried different solutions which have been defined on Stack Overflow but they don't seem to work here. 我尝试了在堆栈溢出中定义的不同解决方案，但它们似乎在这里不起作用。
<table>
<thead>
<tr>
<th>STOCK</th>
<th>PRICE</th>
<th>SHARES</th>
<th>WEIGHT</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stock in stocksArray" class="portfoliokey">
<td>{{stock.key}}</td>
<td class="portfoliovalue">{{"₹" + stock.value}}</td>
<td>
<input type="button" onclick="decrementValue()" value="-">
<input type="button" id="number" value="0" />
<input type="button" onclick="incrementValue()" value="+" />
</td>
<td></td>
</tr>
</tbody>
</table>
Script 脚本
function incrementValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
function decrementValue() {
value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value--;
document.getElementById('number').value = value;
}
2 个解决方案
解决方案1
1 已采纳 2017-07-06 21:28:11
Here's my working version, using the index in the id. 这是我的工作版本，使用id中的索引。
https://plnkr.co/edit/lSteH17zNL7gMHqQQCSI?p=preview https://plnkr.co/edit/lSteH17zNL7gMHqQQCSI?p=preview
var app = angular.module('myApp', []); // var app = angular.module('myApp', []); app.controller('stockCtrl', function($scope, $http) { $http.get('data.json').then(function(response) { $scope.stocksArray = []; var indexes = []; $scope.stocks = response.data.price; $scope.addToTable = function(key, value, index) { var mystock = {}; mystock.key = key; mystock.value = value; mystock.index = index; if (indexes.indexOf(index) == -1) { indexes.push(index); $scope.stocksArray.push(mystock); } }; $scope.incrementValue = function( index ) { var value = parseInt(document.getElementById('number' + index).value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number' + index).value = value; }; $scope.decrementValue = function( index ) { value = parseInt(document.getElementById('number' + index).value, 10); value = isNaN(value) ? 0 : value; value--; document.getElementById('number' + index).value = value; }; }); }); app.filter('objLimitTo', [function() { return function(obj, limit) { if (obj) { var keys = Object.keys(obj); if (keys.length < 1) { return []; } } var result = {}, count = 0; angular.forEach(keys, function(key) { if (count >= limit) { return false; } result[key] = obj[key]; count++; }); return result; }; }]);
<!DOCTYPE html> <html ng-App="myApp"> <head> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="stockCtrl"> <section class="pickstocks"> <label class="basiclabel">Pick Stocks</label> <div class="infoone"> <p>Showing matching stocks</p> <button>Apply Filters</button> </div> <div class="stockpage"> <ul id="nav"> <li ng-repeat="(key,value) in stocks | objLimitTo:8 track by $index"> <span class="keyvalue"> {{key}} </span> <span class="keyvalue">{{"₹" + value}}</span> <span class="fa fa-plus plus" ng-click="addToTable(key, value, $index)"></span> </li> </ul> </div> </section> <section class="pickstocks"> <label class="basiclabel">Manage Portfolio</label> <div> <table> <thead> <tr> <th>STOCK</th> <th>PRICE</th> <th>SHARES</th> <th>WEIGHT</th> </tr> </thead> <tbody> <tr ng-repeat="stock in stocksArray" class="portfoliokey"> <td>{{stock.key}}</td> <td class="portfoliovalue">{{"₹" + stock.value}}</td> <td> <input type="button" id="num1" ng-click="decrementValue( stock.index )" value="-"> <input type="button" id="number{{ stock.index }}" value="0" /> <input type="button" ng-click="incrementValue( stock.index )" value="+" /> </td> <td></td> </tr> </tbody> </table> </div> </section> </div> </body> </html>
解决方案2
0 2017-07-06 21:45:30
Speaking purely of Web standards HTML/CSS/JS-ECMA, I believe using data attributes is purpose built for your use case. 纯粹说Web标准HTML / CSS / JS-ECMA，我相信使用数据属性是针对您的用例而专门设计的。 In other words, use data-whatever="myIdentifierForWhateverProperty" and then use vanilla JS logic if(document.getElementsByTagName("button")[iterateOverEachOne]){do this} else {do that}; 换句话说，使用data-whatever="myIdentifierForWhateverProperty" ，然后使用香草JS逻辑if(document.getElementsByTagName("button")[iterateOverEachOne]){do this} else {do that}; . 。
HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning.
<article id="electriccars" data-columns="3" data-index-number="12314" data-parent="cars"> ... </article>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.