Question

HTML -

<div class="wrap">
    <div class="floatleft">
    <div class="JShover">
    <h3 class="border">Works with your business applications
    <p >Connect with Office 365, GSuite.</p></h3>
    </div>
    <div class="JShover">
    <h3 class="border">Works with your business applications
    <p>Connect with Office 365, GSuite, Zoho, Dropbox and many more to let your teams sign documents without
    having to switch between applications.</p></h3></div>
    </div>
    <div class="floatright" >
    <img class="integration" id="image1" src="integrations1-image.png" width="100%" height="auto">
    <img class="integration" id=iamge2" src="integrations2-image.png" width="100%" height="auto">       </div>
    <div style="clear: both;">
</div>
</div>

CSS -

.border{
  border-left:6px solid #3793EE;
  text-align: left;
  padding-left: 5%;
  }
div.JShover{
    height:50%;
    text-align: left;
    opacity:0.2; 
}
.wrap {
    overflow: hidden;
    margin: auto;
    max-width: 700px;
}
.floatleft {
    float:left; 
    width: 50%;
    height: 500px;

}

.floatright {
    float: right;
    height: 500px;

   width: 50%;
}

JS -

<script>
    $(".JShover").click(function() {
    this.style.opacity = 1
        });

图像在同一个div中。然而，文本在不同的div中。我想使用JS，以便在单击div1时显示image1，当单击div2时显示image2。文本div位于一个名为floatleft的容器中，两个图像都是floatright。我必须为两个图像提供id，使用visibility：在没有单击文本时隐藏图像。无法在JS中实现此功能。

Answer 1

您可以使用

$('#img_id').hide(); // to hide image
$('#img_id').show(); // to show image

所以你的代码就是这样的

$('#div1').on('click', function(){
   $('#image2').hide(); // to hide image
   $('#image1').show(); // to show image
})

$('#div2').on('click', function(){
   $('#image1').hide(); // to hide image
   $('#image2').show(); // to show image
})

Answer 2

首先，你必须检查点击了哪个div，使用index() jQuery函数获取索引：

 if($(this).index() == 0)

请注意，我们从0启动comptabilisation元素而不是1

之后，您只需使用:eq()选择相对img：

if($(this).index() == 0){
  $("img:eq(0)").show();
  $("img:eq(1)").hide();
}else{
  $("img:eq(0)").hide();
  $("img:eq(1)").show();
}

最后，这是一个DEMO：

＆＃13;

$(".JShover").on("click",function(){

if($(this).index() == 0){
  $("img:eq(0)").show();
  $("img:eq(1)").hide();
}else{
  $("img:eq(0)").hide();
  $("img:eq(1)").show();
}
});

＆＃13;

.border{
  border-left:6px solid #3793EE;
  text-align: left;
  padding-left: 5%;
  }
div.JShover{
    height:50%;
    text-align: left;
    opacity:0.2; 
}
.wrap {
    overflow: hidden;
    margin: auto;
    max-width: 700px;
}
.floatleft {
    float:left; 
    width: 50%;
    height: 500px;

}

.floatright {
    float: right;
    height: 500px;

   width: 50%;
}

div.JShover:hover,.border:hover{
 opacity:1; 
 color:blue
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
    <div class="floatleft">
    <div class="JShover">
    <h3 class="border">Works with your business applications
    <p >Connect with Office 365, GSuite.</p></h3>
    </div>
    <div class="JShover">
    <h3 class="border">Works with your business applications
    <p>Connect with Office 365, GSuite, Zoho, Dropbox and many more to let your teams sign documents without
    having to switch between applications.</p></h3></div>
    </div>
    <div class="floatright" >
    <img class="integration" id="image1" src="https://image.flaticon.com/icons/svg/578/578320.svg" width="100%" height="auto" style="display:none">
    <img class="integration" id="iamge2" src="https://image.flaticon.com/icons/svg/578/578457.svg" width="100%" height="auto" style="display:none">       </div>
    <div style="clear: both;">
</div>
</div>

＆＃13;

Answer 3

您可以使用以下内容。代码中的以下评论。

$(".JShover").click(function () {
    this.style.opacity = 1;
    $(".integration").hide();  //Hide all images
    //Only show the image related to the div "JShover" clicked
    $(".integration").eq($(this).index()).show(); 
});

$(function () {
    $(".integration").hide(); //Hide all images

    $(".JShover").click(function () {
        $(".JShover").css('opacity', '0.2');
        this.style.opacity = 1;
        $(".integration").hide(); //Hide all images
        //Only show the image related to the div "JShover" clicked
        $(".integration").eq($(this).index()).show();
    });
});

.border {
	border-left: 6px solid #3793EE;
	text-align: left;
	padding-left: 5%;
}

div.JShover {
	height: 50%;
	text-align: left;
	opacity: 0.2;
}

.wrap {
	overflow: hidden;
	margin: auto;
	max-width: 700px;
}

.floatleft {
	float: left;
	width: 50%;
	height: 500px;
}

.floatright {
	float: right;
	height: 500px;
	width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrap">
	<div class="floatleft">
		<div class="JShover">
			<h3 class="border">Works with your business applications
				<p>Connect with Office 365, GSuite.</p>
			</h3>
		</div>
		<div class="JShover">
			<h3 class="border">Works with your business applications
				<p>Connect with Office 365, GSuite, Zoho, Dropbox and many more to let your teams sign documents without
					having to switch between applications.</p>
			</h3>
		</div>
	</div>
	<div class="floatright">
		<img class="integration" src="integrations1-image.png" width="100%" height="auto" alt="Image1">
		<img class="integration" src="integrations2-image.png " width="100% " height="auto"  alt="Image2">       
	</div>
	<div style="clear: both;"></div>
</div>

如何在单击div1时显示image1，单击div2时image2将替换image1？

3 个答案: