Question

我一直试图让这个工作但是不能这样做而且我不会用我的js来训练你，我们试过这个页面来做这个！

我需要做的是：如果你点击按钮id = circle，圆形（C）按钮的名称附加到#log并将按钮文本ADD更改为Single（X1），这必须切换

如果你点击ADD，方形按钮的名称是Square（S）appendTo #log并将按钮文本ADD更改为Single（X1），这必须切换

如果选择Double（X2），方形按钮的名称是Square（S）appendTo #log并将按钮文本ADD更改为Single（X2），则必须切换此项并且如果此项已被选中如单一，它只是将其更改为Double。

我一直试图让这个工作3天，但总是有些事情不起作用...... 你的帮助将是一种祝福！

    <div id="accordion">
  <h3>test</h3> 
    <div id="container">
    <div id="tabs">
    <ul class="tabs">
    <li><a href="#tabs-1">red</a></li>
    <li><a href="#tabs-2">green</a></li>
    <li><a href="#tabs-3">blue</a></li>
    </ul>
    <div id="tabs-1">
    <span class="inline-block">
    <img class="topping-icon" src="images/image1.png" alt="" />
    </span>
    <span class="inline-block">
    <button id="circle" class="circle-off" type="submit" name="Circle (c)"></button>
    <button id="square" class="square-off" type="submit" name="Square (S)"></button>
    <button id="oval" class="oval-off" type="submit" name="Oval (O)"></button>
    </span>
    <div class="drop">
    <ul id="menu2" class="menu">
        <li><a href="#" id="add" class="btn">ADD</a>
            <ul>
                <li><a href="#">Single (1X)</a></li>
                <li><a href="#">Double (2X)</a></li>
            </ul>
        </li>
    </ul>
    </div>
</div>
</div>
    </div>
</div>   
<div id="right-panel" class="result">
    <img src="images/myimage.png" alt="" />
    <div id="log"></div>
</div>

Answer 1

这是一个可运行的示例，演示如何使用jQuery追加日志并交换“添加”按钮的文本。 HTML只是你的一些添加属性，即按钮上的value属性。除此之外，处理按钮点击只需几行jQuery代码：

$("button").on("click", function() {
  var text = this.name + "<br\>";
  if ($("#log").html().indexOf(text) == -1)
    $("#log").append(text);
  else
    $("#log").html($("#log").html().replace(text,""));
  $("#add").text(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
<div class="wrapper">
<div id="accordion">
  <h3>test</h3> 
    <div id="container">
    <div id="tabs">
    <div id="tabs-1">
    <span class="inline-block">
    <button id="circle" class="circle-off" type="submit" name="Circle (c)" value="Single (x1)">Circle</button>
    <button id="square" class="square-off" type="submit" name="Square (S)" value="Double (x2)">Square</button>
    <button id="oval" class="oval-off" type="submit" name="Oval (O)" value="Single (x1)">Oval</button>
    </span>
    <div class="drop">
    <ul id="menu2" class="menu">
        <li><a href="#" id="add" class="btn">ADD</a>
            <ul>
                <li><a href="#">Single (1X)</a></li>
                <li><a href="#">Double (2X)</a></li>
            </ul>
        </li>
    </ul>
    </div>
</div>


<div id="right-panel" class="result">
    <div id="log"></div>
    </div>

</div>
</div>

我如何让jquery AppendTo工作

1 个答案: