我已经获得了一个特定游船销售门票的小部件，
它需要
<div id="wt_piersWidget" data-api-key="1234" data-tour-id="12"> </div>容器
和一些<button class="wt-open"></button>，
点击按钮后，它打开表格，从中选择数据和码头销售。它适用于每个旅游单独页面的网站。这些页面的简单html是：
`<script type="text/javascript" src="/jquery/1.7.1/jquery.min.js"></script>
<link href="/wt_widget/style.css" rel="stylesheet">
<div id="wt_piersWidget" class="wt__start-hide"
data-api-key="1234"
data-program-id="12"
></div>
<button class="wt-open"></button>
<script src="/wt_widget/widget.js"></script>
`
我在网站上实施它时遇到一些问题，在一个页面上为3个不同的游览提供了特殊的“销售”块。
我正在尝试检查单击3个可能的确切按钮，使用此导览所需的属性值创建<div>，然后使用正确的类创建<button>并单击它。 concole.log()在控制台中返回正确的对象，但小部件不会收到任何这些属性值。
我意识到，在这一点上，我误解了所有这些代码在页面上如何工作的核心原则，我只是不知道从哪里开始修复它。
<!-- css for widget -->
<link href="wt_widget/style.css" rel="stylesheet">
<!---------------------->
<div id="prices">
<div class="section">
<div class="container-fluid">
<h2 class="section-title">Prices block</h2>
<p class="section-subtitle">
</p>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<!-- One of the block with price list for one of the tours (for ex. tour#13) -->
<div class="panel panel__mm-ct">
<div class="cell">
<div class="panel-heading">
<div class="price-icon"
style="background-image: url('/site/assets/files/1111/icon_boat_bus.png');"></div>
<h3>tour title</h3>
<p>ticket info</p>
</div>
<div class="panel-body" id="">
<ul class="list-unstyled">
<li><i class="fa fa-ticket"
aria-hidden="true"></i>ticket type 1</li>
<li><i class="fa fa-ticket"
aria-hidden="true"></i>ticket type2</li>
</ul>
<button id="2" class="btn btn-success" onclick="setProgrammParam(this.id)">Order ticket</button> <!--button inside one o those 3 blocks, button id is how I separate one block from another, it does work -->
<div id="wt_piersWidget" class="wt__start-hide" data-api-key="123"></div> <!--widget template-->
<script>
function setProgrammParam(idCheck) { //idCheck stores value from sales block< so I know which one out of 3 tour blocks is clicked.
var vidgetDiv = document.getElementById("wt_piersWidget");
var attApi = document.createAttribute("data-api-key");
var attId = document.createAttribute("data-tour-id");//creating attributes I need
switch(idCheck) {// trying to set data-tour-id to correc tour, for ex. 12
case '1':
attId.value="12";
vidgetDiv.setAttributeNode(attId);
console.log(vidgetDiv);
var btn = document.createElement("BUTTON"); //creating <button> element I need
btn.setAttribute("id", "widgetButton1"); //with id so I could find it later
btn.setAttribute("class", "wt-open"); //with class widget needs this button to have
document.body.appendChild(btn);
console.log(btn);
document.getElementById('widgetButton1').click(); // and clicking on that button
break;
case '2':
attId.value="13";
vidgetDiv.setAttributeNode(attId);
console.log(vidgetDiv);
var btn = document.createElement("BUTTON"); //creating <button> element I need
btn.setAttribute("id", "widgetButton2"); //with id so I could find it later
btn.setAttribute("class", "wt-open"); //with class widget needs this button to have
document.body.appendChild(btn);
console.log(btn);
document.getElementById('widgetButton2').click(); // and clicking on that button
break;
default:
attId.value="10";
vidgetDiv.setAttributeNode(attId);
console.log(vidgetDiv);
var btn = document.createElement("BUTTON"); //creating <button> element I need
btn.setAttribute("id", "widgetButton0"); //with id so I could find it later
btn.setAttribute("class", "wt-open"); //with class widget needs this button to have
document.body.appendChild(btn);
console.log(btn);
document.getElementById('widgetButton0').click(); // and clicking on that button
break;
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jquery 1.7.1-->
<script type="text/javascript" src="1.7.1/jquery.min.js"></script>
<!--------------->
<!-- link to a widget-->
<script src="/wt_widget/widget.js"></script>
<!--/link to a widget-->
我在这里只发布了一个区块，但它们基本相同并且一个接一个地进行 我很麻烦在运行中生成这些div，因为只使用不同的div属性复制html html代码3次会导致所有按钮只使用来自第一个div的属性，这就是它应该发生的方式，我理解。我只是难以理解为什么上面的例子中的小部件有什么不同。根据我的理解，我只在按下第一个按钮后生成所有我需要的东西，并且它只生成一个带有属性的div，然后按下一个按钮，小部件不应该看到这个和简单的html示例之间的区别，就像我看到的那样它。最初我尝试更改已存在的值，但它仍然打开了具有默认值的小部件。
答案 0 :(得分：0)
在你的第一个代码块中，一切都有意义，你的html中定义了一个按钮，然后运行js widget脚本文件，附加click事件。但是当你通过代码执行它时，需要附加某些点击处理程序。我的意思是，脚本在创建的那些按钮之前运行。