當單選按鈕被選中時，如何用JQuery替換HTML

Question

我想更改HTML並替換DIV（不顯示並隱藏它們）。有人告訴我，在jQuery中替換HTML並不是一個好主意。有人可以幫助我改變或替換此代碼中的HTML以顯示新按鈕（不隱藏和顯示）的最佳方式。感謝您的反饋意見。我每天都在學習謝謝你！

function change_button(){ \t \t \t 
 
\t \t \t \t //join pro buttons 
 
\t \t \t \t \t $("input[name=members-buttons]").on("change", function() { 
 
\t \t \t \t \t \t var enabled = $(this).val(); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t $(".none").hide(); 
 
\t \t \t \t \t \t $("#"+enabled).show(); 
 
\t \t \t \t \t }); \t \t \t 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t } 
 
     
 
    change_button();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="radio" name="members-buttons" value="buyers-button"> 
 
    Buyers/Tenant <br> 
 
    <input type="radio" name="members-buttons" value="agent-button"> 
 
    Agent/Landlord <br> 
 
    <div id="button-container"> 
 
<div class="none join-now-btn-container" id="members-disabled-btn"> <a href="/register" class="btn logo-color-btn">Join Now Disabled</a> </div> 
 
<br> 
 
    <div class="none join-now-btn-container" id="buyers-button"> <a href="/register" class="btn logo-color-btn">Join Now</a> </div> 
 
    <br> 
 
    <div class="none join-now-btn-container" id="agent-button"> <a href="/pro-membership-packages" class="btn logo-color-btn">Join Now</a> </div> 
 
    </div> 
 
</form>

Answer 1

我做了很多web應用程序中的jQuery在很多web應用程序中都沒有任何問題，所以我不知道他們爲什麼告訴你。

選中此示例。我將URL放入選項中，該選項值將在鏈接中使用。我不知道你是否真的發送了這個表單，或者它只是一種自定義聯接鏈接的方式。

$(function() { 
 
    $("input[name=members-buttons]").on("change", function() { 
 
    var sel = $(this).val(); 
 

 
    $('#button-container').empty(); 
 

 
    jQuery('<a/>', { 
 
     href: sel, 
 
     class: 'btn logo-color-btn', 
 
     html: 'Join Now' 
 
    }).appendTo('#button-container'); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="radio" name="members-buttons" value="/register" /> Buyers/Tenant <br> 
 
    <input type="radio" name="members-buttons" value="/pro-membership-packages" /> Agent/Landlord <br> 
 
</form> 
 
<div id="button-container"></div>

Answer 2

function change_button() { 
 
    //join pro buttons 
 
    $('.none').hide(); 
 
    $("input[name=members-buttons]").on("change", function() { 
 
    $('.none').show(); 
 
    var enabled = $(this).val(); 
 
    if(enabled == 'buyers-button'){ 
 
     $('.logo-color-btn').attr('href','/register'); 
 
     $('.logo-color-btn').html('Join Now As Agent'); 
 
    } 
 
    else{ 
 
     $('.logo-color-btn').attr('href','/pro-membership-packages'); 
 
     $('.logo-color-btn').html('Join Now As Pro Member'); 
 
    } 
 
    }); 
 

 
} 
 

 
change_button();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="radio" name="members-buttons" value="buyers-button"> Buyers/Tenant <br> 
 
    <input type="radio" name="members-buttons" value="agent-button"> Agent/Landlord <br> 
 
    <div id="button-container"> 
 
    <div class="none join-now-btn-container" id="buyers-button"> <a href="/register" class="btn logo-color-btn">Join Now</a> </div> 
 

 
    </div> 
 
</form>

請檢查代碼可能會幫助您解決問題

感謝