选中广播按钮时，如何用jQuery替换HTML

Question

我想更改HTML并替换DIV(不显示并隐藏(。有人告诉我，在jQuery中取代HTML不是一个好主意。有人可以帮助我以更改或替换此代码中的HTML的最佳方法以显示新按钮(而不是隐藏和显示(。感谢您的反馈意见。我每天都在学习，谢谢你！

 function change_button(){			
				//join pro buttons
					$("input[name=members-buttons]").on( "change", function() {
						 var enabled = $(this).val();
						
						 $(".none").hide();
						 $("#"+enabled).show();
					});			
								
			}
      
    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对HTML进行了很多更改，没有任何问题，所以我不知道他们为什么告诉您。

检查此示例。我将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>

请检查代码可能会帮助您解决问题

谢谢