Question

我需要在同一页面上多次使用“使用jQuery单击链接时显示和隐藏div”的帮助。使用本指南https://coding-tips.com/javascript/show-hide-div/，我在页面上添加了显示和隐藏div链接，单击该链接后，将使用隐藏的iframe将WHMCS产品添加到购物车，并添加WHMCS提供的产品的添加到购物车URL。单击该链接时，该链接将被隐藏，并显示带有绿色文本和勾号的新链接，以便用户知道已将其添加到购物车中。

我尝试过更改第二个链接的类，但是我没有尝试允许两个链接彼此分开工作。我虽然每个链接都有自己的类，但是它们可以彼此独立工作，但是在我的测试中似乎并非如此。

我想复制链接并将其添加到每种产品的同一页面。

隐藏的框架：

<iframe style="display:none;" name="target"></iframe>

LINK：

<a href="https://example.org/cart.php?a=add&pid=144" target="target" class="showClick show">ADD TO CART</a> 
<a href="#" class="hideClick hidden">✔ ADD TO CART</a>

JAVASCRIPT：

$(function() {
  $('.showClick').click(function() {
    $('.hidden').show();
    $('.show').hide();
  });
  $('.hideClick').click(function() {
    $('.hidden').hide();
    $('.show').show();
  });
});

CSS：

/* Hide Added To Cart Link */
.hidden {
display:none;
}

/* Make Link Look Like Button */

.showClick.show {
    padding: 15px 30px;
    border: 1px solid #fff;
    border-radius: 2px;
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.61);
    cursor: pointer;
}

.showClick.show:hover {
    background-color: #9b9b9b;
    border: 1px solid #9b9b9b;
}

.hideClick.hidden {
    padding: 15px 30px;
    border: 1px solid #fff;
    border-radius: 2px;
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.61);
    cursor: pointer;
    background-color: green;
}

.hideClick.hidden:hover {
    background-color: #9b9b9b;
    border: 1px solid #9b9b9b;
}

效果很好，但我无法获得第二个链接来使用其他产品。如果单击第一个链接，它将更改第二个产品链接的隐藏/显示状态，反之亦然。我的目标是在页面上拥有许多产品链接，单击这些链接后，无需用户离开页面即可将不同的产品添加到WHMCS购物车。点击的每个产品链接都将带有绿色的勾号，以便用户知道他们已添加到购物车的内容。

编辑

在您的帮助下，我可以创建以下方法来单击链接后更改链接上的文本。使用onclick =“ func（this）”

可以独立处理页面上的每个链接

这是我的代码：

<iframe style="display:none;" name="target"></iframe>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function func(e) {
  $(e).text('ADDED TO CART');
}
</script>
<a onclick="func(this)" href="https://example.org/cart.php?a=add&pid=144" target="target" class="product-button">ADD TO CART</a>

Answer 1

在您的帮助下，我能够创建以下方法，以在单击链接后更改链接上的文本。使用onclick =“ func（this）”

可以独立处理页面上的每个链接

这是我的代码：

<iframe style="display:none;" name="target"></iframe>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function func(e) {
  $(e).text('ADDED TO CART');
}
</script>
<a onclick="func(this)" href="https://example.org/cart.php?a=add&pid=144" target="target" class="product-button">ADD TO CART</a>

Answer 2

链接应该具有相同的CSS类，但是您需要为每个链接使用不同的ID，并在.on('click')函数内部单击时访问它们的ID；

     let id = $(this).attr('id');

复制必须以编程方式完成，并在复制时分配不同的ID和不同的href属性，例如

     let products = [
        {
            id: 2,
            link: 'pid=144'
        },
        {
            id: 3,
            link: 'pid=154'
        }
    ];

    for (let i = 0; i < products.length; i++) {
        const element = products[i];
        let strElement = '<a id=' + (i + 1) + '  href="https://example.org/cart.php?a=add&' + element.link+'" target="target" class="showClick show"> Click to Add to Cart </a>';
        // Appending to body element here but if you have a container div, use it's id with a # prefix
        $('body').append(strElement);
    }

javascript在同一页面上多次

2 个答案: