Question

我正在尝试使用两个对象增加页面上的多个属性。我试过像这样使用.split（）

var words = $('.block').find('input').attr('js-data-reveals').split(',');
var num = 0;

words += '_' + num++

$('.block').find('input').attr('js-data-reveals', words);

返回：

js-data-box="TYPE_0,FONT_1"

我想在整个页面中搜索此属性并增加每个集合。 e.g

js-data-box="TYPE_1,FONT_1"
js-data-box="TYPE_2,FONT_2"

Answer 1

你应该使用正则表达式和jQuery做一些工作，下面是一个完整的例子：

＆＃13;

$(function(){
  $('.block').find('input').each(function(){
    var attrName = 'js-data-reveals';
    var $el = $(this);
    var attrs = $el.attr(attrName);
    var data = attrs.split(',').map(function(item){
      return item.replace(/\d+/, function(num){ return ++num});
    });
    $el.attr(attrName, data.join(','));
  });
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
<div class="block">
  <input js-data-reveals="TYPE_1,FONT_1" />
  <input js-data-reveals="TYPE_5,FONT_2" />
 </div>
   <div class="block">
  <input js-data-reveals="TYPE_8,FONT_0" />
  <input js-data-reveals="TYPE_2,FONT_3" />
 </div>
</body>
</html>

＆＃13;

Answer 2

使用String.split时，您将创建一个数组。您必须循环遍历数组中的每个项目。这样做的正确方法是：

var num = 0; // Set counter to 0

var newString = string.split(",").map(function(item) { // Split the string by ',' then loop through each item, replacing it with the correct value
    return item + '_' + num;
}).join(','); // re-join the array of strings into a single string.
num++; // Increment counter.

编辑：

好像你在寻找别的东西。在您希望基于当前值递增的情况下，执行此操作的正确方法是使用Clieton所示的正则表达式。您仍然必须使用Array.map函数，因为split返回一个数组。唯一的区别是你必须使用正则表达式才能使原始数字增加。

Answer 3

如果您希望收集属性并使用唯一的计数器存储它们。

＆＃13;

var num = 0;
var words = [];
var multiDimensional = [];
function CollectAttributes(params) {
    console.log("Print attributes Line by Line");
    $('.block').children('input').each(function () {
        var attributes = $(this).attr('js-data-reveals').split(',');
        var byLine = [];
        for(i = 0; i < attributes.length; i++){
            byLine.push(attributes[i]+ "_" + num);
            words.push(attributes[i]+ "_" + num);
        }
        multiDimensional.push(byLine);
        console.log(byLine.join()); // Result => Line by Line
        num++;
    });
    console.log("Print attributes all in one array");
    console.log(words); // Result => Basic array
    console.log("Print attributes in multidimensional array");
    console.log(multiDimensional); // Result => MultiDimensional array
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
  <input type="text" js-data-reveals="TYPE,FONT,ETC">
  <input type="text" js-data-reveals="TYPE,FONT,ETC">
  <input type="text" js-data-reveals="TYPE,FONT,ETC">
  <input type="text" js-data-reveals="TYPE,FONT,ETC">
  <input type="text" js-data-reveals="TYPE,FONT,ETC">
  <input type="text" js-data-reveals="TYPE,FONT,ETC">
  <input type="text" js-data-reveals="TYPE,FONT,ETC">
  <input type="text" js-data-reveals="TYPE,FONT,ETC">
  <input type="text" js-data-reveals="TYPE,FONT,ETC">
  <input type="text" js-data-reveals="TYPE,FONT,ETC">
</div>

<input type="button" value="Test" onclick="CollectAttributes(this);">

＆＃13;

如何在页面上增加多个属性？

3 个答案: