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

我在许多网络应用程序中使用jQuery对html做了很多更改而没有任何问题，所以我不知道他们为什么告诉你这个。

检查此示例。我将url放在选项值中，该值将在选中时在链接中使用。我不知道您是否真的发送了该表单，或者它只是一种自定义加入链接的方式。

＆＃13;

$(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');
  });

});

＆＃13;

<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>

＆＃13;

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>

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

谢谢

当选中单选按钮时，如何用JQuery替换HTML

2 个答案: