Question

我有以下代码，

<li>
  <button id="javascript:var id_btn1 = 'id' + Math.random().toString(16).slice(2);" 
      class="btn btn-primary helpful">
    <i class="fa fa-thumbs-up"></i>
    Helpful
    <p id="javascript:var id_count1 = 'id' + Math.random().toString(16).slice(2);"
      class="btn btn-primary helpful" ></p>
  </button>
</li>

我想知道这段代码是否正确（语法）。这不能正常工作。

Answer 1

我认为您正在尝试动态构建列表。这是一个使用React的粗略实现（因为它使这很容易）：

import React from 'react';
export class YourList extends React.Component {
  makeId() {
    return 'id' + Math.random().toString(16).slice(2);
  }
  renderItem() {
    return (
      <li>
        <a id={this.makeId()} className="btn btn-primary helpful">
          <i className="fa fa-thumbs-up"></i>
          Helpful
          <p id={this.makeId()} className="..."></p>
        </a>
      </li>
    );
  }
  render() {
    return <ul>{this.props.items.map(renderItem, this)}</ul>;
  }
}

将子元素放入<button>并不是一个好主意，因此我使用了<a>;看起来你正在使用Bootstrap，所以它会起作用。

Answer 2

好的，让我试着理解你想要的东西......

下面

<button id="javascript:var id_btn1 = 'id' + Math.random().toString(16).slice(2);">

您正在尝试声明一个名为id_btn1的变量，该变量包含以下值Math.random().toString(16).slice(2);。好吧，假设它是可能的（它不是）...在特定地方声明变量并不意味着它的值将被打印在那里。

你应该做的是编写没有id属性的HTML元素：

<ul id="myList">
  <li>
    <button id="" class="btn btn-primary helpful">
      <i class="fa fa-thumbs-up"></i>
      Helpful
      <p id="" class="btn btn-primary helpful" ></p>
    </button>
  </li>
</ul>

然后选择列表并为每个P和Button后代生成一个id值。像这样：

function generateIds() {
    var list = document.getElementById('myList');
    var ps = list.getElementsByTagName("p");
    var btns = list.getElementsByTagName("button");

    for (var i = 0; i < ps.length; i++) {
        ps[i].setAttribute('id', Math.random().toString(16).slice(2));
    }

    for (var i = 0; i < btns.length; i++) {
         btns[i].setAttribute('id', Math.random().toString(16).slice(2));
    }
}

然后将generateIds()函数附加到<body>元素的onload事件：

<body onload="generateIds()">

在这个小提琴上抓一个战利品http://jsfiddle.net/fnpo41pu/

在html属性中嵌入javascript

2 个答案: