如何使用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>

如果默认情况下一切都可见，则应隐藏“显示”按钮：

<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 Library以运行此代码

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