Question

我有一段数组数据，如：

$array = {
    "sections" : {
        "H": {
            "name": "dummy",
            "html": "<div id="dummy">d</div>"
        }
    }
}

我正在关注像这样的点击事件的数据

$htmlData = $array["sections"]["H"]['html'];

现在我想要的是：点击按钮后html出来（工作），每次点击都会增加id虚拟

默认情况下为：

<div id="dummy">d</div>

第一次保持不变：

<div id="dummy">d</div>

但第二次点击它会变成：

<div id="dummy--1">d</div>

第三次点击

：

<div id="dummy--2">d</div>

等等。

$array = {
	"sections" : {
		"H": {
			"name": "dummy",
			"html": "<div id=\"dummy\">d</div>"
		}
	}
}

$(function(){
	$('#cm').click(function(event) {
		$htmlData = $array["sections"]["H"]['html'];
    console.log($htmlData);
	});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="cm">Click me</button>

Answer 1

您需要跟踪变量中的点击次数：counter每次点击都会增加此计数器并相应地更改html。

＆＃13;

var counter = 0;

$array = {
    "sections": {
        "H": {
            "name": "dummy",
            "html": "<div id=\"dummy\">d</div>"
        }
    }
}

$(function() {
    $('#cm').click(function(event) {
        $htmlData = $array["sections"]["H"]['html'];
        console.log($htmlData);
        counter++;
        $array["sections"]["H"]['html'] = "<div id=\"dummy--" + counter + "\">d</div>"
    });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="cm">Click me</button>

＆＃13;

Answer 2

为此使用计数器变量，在第二次单击时解析HTML并更新id属性并使用jQuery返回HTML。

＆＃13;

$array = {
  "sections": {
    "H": {
      "name": "dummy",
      "html": "<div id=\"dummy\">d</div>"
    }
  }
}

$(function() {
  // counter which holds the counts of click
  var count = -1;
  $('#cm').click(function(event) {
    $htmlData = $array["sections"]["H"]['html'];
    // check the count value for second click
    if (++count > 0)
      // in case of not a first click parse the html and generate a jQuery object
      $htmlData = $($htmlData).attr('id', function(i, v) {
        // update the attrubute value
        return v + '--' + count
        // get back the html content from the DOM object
      })[0].outerHTML
    console.log($htmlData);
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="cm">Click me</button>

＆＃13;

Answer 3

如果你想要你的id是＆＃34; dummy1＆＃34; ＆＃34; dummy2＆＃34;每次点击，只有一个计数器，如下所示

var i=0;
$(function(){
    $('#cm').click(function(event) {
        i++;
        $htmlData = $array["sections"]["H"]['html']="html": "<div id=\"dummy"+i+"\">d</div>"
       console.log($htmlData);
    });
})

Answer 4

＆＃13;

$array = {
    "sections" : {
        "H": {
            "name": "dummy",
            "counter": 0,
            "html": "<div id=\"{id}\">d</div>"
        }
    }
}

$(function(){
    $('#cm').click(function(event) {
        var $arr = $array["sections"]["H"],
            $name = $arr.name,
            $counter = $arr.counter,
            $htmlData = $arr.html,
            $id;

        if ($counter > 0) {
            $id = $name + "--" + $counter;
        } else {
            $id = $name;
        }

        console.log($htmlData.replace("{id}", $id));
        $array["sections"]["H"]["counter"] = ++$counter;
    });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="cm">Click me</button>

＆＃13;

如何从数组

4 个答案: