时间戳

首页 > 解决方案 > Onclick用jQuery替换div中的项目信息

jquery - Onclick用jQuery替换div中的项目信息

问题描述

目标是为我的客户构建一个估算器界面。

所以我有几个盒子，里面有客户可以添加或删除的项目（域名、托管、...）。

所选项目的结果如下所示：

<ul class="calculator__sidebar-ul">
</ul>

我的代码的问题是每次用户单击一个项目时，它都会添加一个新行，而它应该替换原来的行。

我怎样才能改变这种行为？

$('input[name="hosting"]').click(function() {
    value = $(this).data('value');
    title = $(this).data('title');

    if($('li #hosting').length == 1) { $('li #hosting').remove(); }
    $('.calculator__sidebar-ul').append('<li id="hosting">'+ title +'<span class="calculator__sidebar-price"> + '+ value +' $</span></li>');
});


$('input[name="domain"]').click(function() {
    value = $(this).data('value');
    title = $(this).data('title');

    if($('li #domain').length == 1) { $('li #domain').remove(); }
    $('.calculator__sidebar-ul').append('<li id="domain">'+ title +'<span class="calculator__sidebar-price"> + '+ value +' $</span></li>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h4>Hosting (1 year)</h4>
<div class="form__form-group">
    <label class="radio-btn calculator__radio-btn">
        <input class="radio-btn__radio" type="radio" data-value="0" data-title="No hosting" name="hosting">
        <span class="radio-btn__radio-custom"></span>
        <span class="radio-btn__label">No hosting
            <span class="calculator__color_label">+ 0$</span>
        </span>
    </label>
    <label class="radio-btn calculator__radio-btn">
        <input class="radio-btn__radio" type="radio" data-value="200" data-title="Yes, add one hosting" name="hosting">
        <span class="radio-btn__radio-custom"></span>
        <span class="radio-btn__label">Yes, add one hosting
            <span class="calculator__color_label">+ 200$</span>
        </span>
    </label>
</div>




<h4>Domain name (1 year)</h4>
<div class="form__form-group">
    <label class="radio-btn calculator__radio-btn">
        <input class="radio-btn__radio" type="radio" data-value="0" data-title="No domain" name="domain">
        <span class="radio-btn__radio-custom"></span>
        <span class="radio-btn__label">No domain
            <span class="calculator__color_label">+ 0$</span>
        </span>
    </label>
    <label class="radio-btn calculator__radio-btn">
        <input class="radio-btn__radio" type="radio" data-value="50" data-title="Yes, add one domain" name="domain">
        <span class="radio-btn__radio-custom"></span>
        <span class="radio-btn__label">Yes, add one domain
            <span class="calculator__color_label">+ 50$</span>
        </span>
    </label>
</div>



<ul class="calculator__sidebar-ul">
</ul>

谢谢。

标签： jquery

解决方案

我会推荐更多这种方法。

有了这个，您将只更新该<ul>部分而不复制您的 jquery 代码。

// Update the <ul> part:
<ul class="calculator__sidebar-ul hidden">
    <li id="hosting"></li>
    <li id="domain"></li>
</ul>

// Update the jQuery code
$('input[class="radio-btn__radio"]').click(function() {
    name = $(this).attr('name');
    value = $(this).data('value');
    title = $(this).data('title');

    $('#' + name).empty();
    $('#' + name).html(title + '<span class="calculator__sidebar-price"> + ' + value + ' $</span>');    
});

推荐阅读