jquery - 如何使用 jquery 仅显示一个显示/隐藏按钮？

Question

我被困在这里。这是我正在尝试做的事情。如果图像和描述列表可见，则应仅显示隐藏按钮。如果图像和描述列表被隐藏，则只有显示按钮应该是可见的。这是我试图做的：

$("#hide").toggle('slow');
$("#show").toggle('slow');

这是我的 js 代码： $(document).ready(function(){ $("#hide").click(function(){ $("img, dl").hide(); }); $(" #show").click(function(){ $("img, dl").show(); $(document).ready(function(){ $('#show').hide(); function clickHandler( ) { $('#hide').toggle('slow'); $('#show').toggle('slow'); } }); }); }); 当页面加载时，只应显示隐藏按钮。如果图像和描述列表不可见，则应显示显示按钮。页面加载时两个按钮都显示这是什么问题？

Answer 1

我们需要查看更多代码以发现潜在错误——这两行没有任何问题。我们需要知道您面临的问题是什么。

无论如何，这是一个可能的解决方案。.toggle()切换可见性，因此如果只有一个按钮可见，那么您需要先隐藏其中一个。这可以通过 CSS 或 jQuery 来完成。

假设这是您的标记：

<button id="show">Show</button>
<button id="hide">Hide</button>

如果默认情况下所有内容都可见，则 Show 按钮应隐藏：

<button id="show" style="display:none;">Show</button>
<button id="hide">Hide</button>

或者你可以使用一个特殊的类。例如.hidden {display:none;}

否则，您可以在页面加载时隐藏按钮：

$(document).ready(function(){
    $('#show').hide();
});

然后你可以.toggle()在点击事件处理程序中使用：

function clickHandler() {
    $('#hide').toggle('slow');
    $('#show').toggle('slow');
}

$(document).ready(function(){
    $('#show').hide();

    $('#hide, #show').on('click', clickHandler);
});

这是一个例子：jsfiddle

Answer 2

请在您的项目中包含 JQuery 库以运行此代码

$(document).ready(function(){
	
	if($("#mode").val() == 'N') {
		$("#req_button").html("<input type='submit' value='Save Record' id='btnSave'>").show();
	}
	
	$("#mode").change(function(){
		var mode = $("#mode").val();
		if(mode == 'N') {
			$("#req_button").html("<input type='submit' value='Save Record' id='btnSave'>").show();
		} else if(mode == 'M') {
			$("#req_button").html("<input type='submit' value='Update Record' id='btnUpdate'>").show();
		} else if(mode == 'R') {
			$("#req_button").html("<input type='submit' value='Remove Record' id='btnRemove'>").show();
		}
	});
	
});

<td>
  <select name="mode" id="mode">
    <option value="N">New</option>
    <option value="M">Modify</option>
    <option value="R">Remove</option>
  </select>
</td>

<td><span id="req_button"></span></td>