Question

我正在尝试学习jQuery和Javascript。我想使用我在页面上放置的按钮来隐藏和显示带有按钮的Div元素（div2）。但是，我希望将jQuery代码放在以后引用的单独文件中（例如自定义.css文件）。这是我的基本代码：

#div1{
	background-color: aquamarine;	
}

#div2{
	background-color: firebrick;	
}

#hide_show{
	
background-color: cornflowerblue;
	
}

<html>
	
	<head>
		
			
    <link href="special.css" rel="stylesheet" type="text/css">
		
		</head>

	<body>		

		<div id ="div1">
			
			this is a container
			
		</div>
		
		<div id = "div2">
		
			This is another div.
		
		</div>
		
		<button type="button" id ="hide_show">Click Me!</button>
	

	</body>
	
</html>

引用文件不是问题。但是，如何继续编写Javascript文件？另外，您选择的文本编辑器是否会影响网站上Javascript的执行方式？我目前正在使用代码块。

谢谢。

Answer 1

$('#hide_show').click(()=>{ // subscribe to button click event
     $('#div2').fadeToggle(); // animate show hide toggle
     // $('#div2').toggle(); // without animation effect
});

方法.fadeToggle()或.toggle()可能会有帮助。

Answer 2

嗨，因此您的html文件应首先引用Jquery，然后在您的JS文件中可以做到：

$('#hide_show').on('click', function(event){
  $('#div2').hide();
});

Answer 3

html语法无效。您需要先解决该问题。使用网站http://fixmyhtml.com 然后用你可以写jQuery

$('#hide_show').click(function(){
  $('#div2').toggle();
});

Answer 4

对于此类问题，我建议您访问网站https://w3schools.com。

它将告诉您如何正确地包含JQuery库，它是编程语法的良好参考站点。

例如，在https://www.w3schools.com/jquery/jquery_get_started.asp上显示为：

如果您不想自己下载并托管jQuery，则可以从CDN（内容交付网络）中添加它。

Google和Microsoft都托管jQuery。

要使用Google或Microsoft的jQuery，请使用以下其中一项：

Google：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Microsoft：

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

此外，https://www.w3schools.com/jquery/eff_toggle.asp告诉您如何使用toggle方法，该方法实际上有很多人通常不知道的花絮

Answer 5

在这种情况下使用的一种好方法是.toggle()。如果元素被隐藏，则基本上适用.show()，如果元素被显示则.hide()。

示例：

$(document).on('click', 'button', e => {
  $($(e.target).data('target')).toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" data-target="#div1">Toggle #div1</button>
<button type="button" data-target="#div2">Toggle #div2</button>

<div id="div1">
  this is a container.
</div>
<div id="div2">
  This is another div.
</div>

您还将注意到，我是从clicked元素动态获取操作的目标元素的（click事件被传递给该函数，并且其target属性引用了事件的目标。{{ 1}}基本上会读取clicked元素的$(e.target).data('target')属性），因此上述代码将使任何数量的按钮都能正常工作，而无需进行任何修改。

data-target

...将使用<button type="button" data-target="#div3">Toggle #div3</button>切换任何元素。

更进一步，您可能不希望此行为绑定到恰好具有id="div3"属性的全部按钮上。因此，我们将其限制为仅具有data-target类并且也具有toggler属性的按钮：

data-target

$(document).on('click', 'button.toggler[data-target]', e => {
  $($(e.target).data('target')).toggle();
});

如您所见，现在只有第一个按钮有效，因为第二个按钮不符合选择器的条件：<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="toggler" type="button" data-target="#div1">Toggle #div1</button> <button type="button" data-target="#div2">Toggle #div2</button> <div id="div1"> this is a container. </div> <div id="div2"> This is another div. </div>（它没有button.toggler[data-target]类-但是如果您确实添加了它，它将开始起作用。）

除了toggler，.toggle()和.show()方法仅更改元素的.hide()属性之外，jQuery还提供了两个用于切换显示的帮助程序类：{{3} }和fading，每个都有自己的特定方法。

Answer 6

在按钮点击时隐藏显示元素
在本例中，我使用一个函数来隐藏单击时的显示元素，因此我可以多次使用此函数。通过在任何按钮点击函数上传递参数

let CustomeToggle = (divId,readMoreText)=>{
            divId.toggle();
            switch($(readMoreText).text()){
                case 'Read more':
                $(readMoreText).text('Less')
                break;
                case 'Less':
                $(readMoreText).text('Read more')
                break;
                case 'view more':
                $(readMoreText).text('less view')
                break;
                case 'less view':
                $(readMoreText).text('view more')
                break;
                default:
                $(readMoreText).text('Read More')   
            }
        }

        $('#alphaReadmore').click(function(){
            CustomeToggle($('.FirstDiv'),this)
        })

        $('#count_viewmore').click(function(){
            CustomeToggle($('.secondDiv'),this)
        })

a{
 color:blue;
 display:block;
 margin-top:15px;
 cursor: pointer
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<p>A B C D<span class="FirstDiv" style="display: none;"> E F G H</span>
<br>
<a id="alphaReadmore">Read more</a> 
</p>

<br><br>

<p>1 2 3 4 5<span class="secondDiv" style="display: none;"> 6 7 8 9 10</span>
<br>
<a id="count_viewmore">view more</a> 
</p>

使用jQuery隐藏/显示元素

6 个答案: