可以在单个HTML部分上为不同功能使用两个不同的JavaScript查询吗？

huangapple
go评论195阅读模式
英文:

Is it possible to work two different javascript queries for different functionality on single HTML section?

问题

以下是您提供的HTML和JavaScript代码的翻译：

  1. 我已经创建了一个HTML部分。在这个部分中，我在一个div标记中使用了两个容器，并将其设置为flex，以便最终的容器会显示在左边和右边。在左边的容器中，我从上到下创建了三个卡片，而在右边的容器中，我插入了三个图片并将它们设置为绝对定位，以便它们彼此重叠。我使用了一个JavaScript查询，以便在5秒的间隔内显示其他图片，并将左边的容器设置为不可见。但我想再使用一个查询，在其中，我希望在悬停在任何卡片上时，该卡片对应的图片会变为可见。例如，如果第二/第三张图片可见，而我悬停在第一个卡片上，那么第一个图片应该出现。
  3. <!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
  5. <!-- JavaScript 代码 -->
  7. var activeImageId = 1;
  8. var nextImageId = 1;
  10. setInterval(function() {
  11.     nextImageId = nextImageId + 1;
  13.     if (nextImageId < 3) {
  14.         document.getElementById("img" + activeImageId).classList.replace("visible", "hidden");
  15.         document.getElementById("img" + nextImageId).classList.replace("hidden", "visible");
  16.         activeImageId = nextImageId;
  17.     } else {
  18.         document.getElementById("img" + activeImageId).classList.replace("visible", "hidden");
  19.         document.getElementById("img" + nextImageId).classList.replace("hidden", "visible");
  20.         activeImageId = 3;
  21.         nextImageId = 0;
  22.     }
  23. }, 5000);
  25. // 为第一张图片
  26. function change1() {
  27.     document.getElementById("img1").src = "images/50k.png";
  28. }
  30. function change2() {
  31.     document.getElementById("img1").src = "images/50k.png";
  32. }
  34. // 为第二张图片
  35. function change3() {
  36.     document.getElementById("img2").src = "images/insta-pic.png";
  37. }
  39. function change4() {
  40.     document.getElementById("img2").src = "images/insta-pic.png";
  41. }
  43. // 为第三张图片
  44. function change5() {
  45.     document.getElementById("img3").src = "images/stats.png";
  46. }
  48. function change6() {
  49.     document.getElementById("img3").src = "images/stats.png";
  50. }
  52. <!-- CSS 代码 -->
  54. .why-choose-main-container {
  55.     border: 1px solid red;
  56.     display: flex;
  57.     align-items: center;
  58.     justify-content: center;
  59. }
  61. .why-choose-main-container .why-choose-details {
  62.     border: 2px solid green;
  63. }
  65. .why-choose-main-container .why-choose-details .card {
  66.     border: 2px solid red;
  67. }
  69. .why-choose-main-container .why-choose-image {
  70.     border: 2px solid blue;
  71.     display: flex;
  72.     position: relative;
  73.     width: 570px;
  74.     height: 670px;
  75. }
  77. .why-choose-main-container .why-choose-image img {
  78.     position: absolute;
  79.     width: 100%;
  80.     height: 100%;
  81. }
  83. .why-choose-main-container .why-choose-image img.visible {
  84.     display: block;
  85. }
  87. .why-choose-main-container .why-choose-image img.hidden {
  88.     display: none;
  89. }
  91. <!-- HTML 代码 -->
  93. <div class="why-choose-main-container">
  94.     <div class="why-choose-details">
  95.         <div class="card" onmouseover="change1()" onmouseout="change2()">
  96.             <h2>why1</h2>
  97.         </div>
  98.         <div class="card" onmouseover="change3()" onmouseout="change4()">
  99.             <h2>why2</h2>
  100.         </div>
  101.         <div class="card" onmouseover="change5()" onmouseout="change6()">
  102.             <h2>why3</h2>
  103.         </div>
  104.     </div>
  105.     <div class="why-choose-image">
  106.         <img src="images/50k.png" alt="img1" id="img1" class="visible">
  107.         <img src="images/insta-pic.png" alt="img2" id="img2" class="hidden">
  108.         <img src="images/stats.png" alt="img3" id="img3" class="hidden">
  109.     </div>
  110. </div>
  112. <!-- 结束代码片段 -->

请注意，这是您提供的代码的翻译版本，其中包括HTML、JavaScript和CSS。如果您有任何其他疑问或需要进一步的帮助，请随时提出。

英文:

I have made an HTML section. In this section, I have used two containers in a div tag and made it flex so that the final containers would be visible left and right. In the left container, I made three card from top to bottom, and in the right container, I inserted the three images and made them position absolute, so that it will be on one to another. I have used one JavaScript query so that in 5 seconds intervals other images will be visible and the left should be displayed none. But I want to use one more query, and in that, I want functionality that whenever I hover on any card that card's respective image should be visible. For example, if the second/third image is visible and I hover over the first card then the first image should appear.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. var activeImageId = 1;
  2. var nextImageId = 1;
  3. setInterval(function() {
  4. nextImageId = nextImageId + 1;
  5. if (nextImageId &lt; 3) {
  6. document.getElementById(&quot;img&quot; + activeImageId).classList.replace(&quot;visible&quot;, &quot;hidden&quot;);
  7. document.getElementById(&quot;img&quot; + nextImageId).classList.replace(&quot;hidden&quot;, &quot;visible&quot;);
  8. activeImageId = nextImageId;
  9. } else {
  10. document.getElementById(&quot;img&quot; + activeImageId).classList.replace(&quot;visible&quot;, &quot;hidden&quot;);
  11. document.getElementById(&quot;img&quot; + nextImageId).classList.replace(&quot;hidden&quot;, &quot;visible&quot;);
  12. activeImageId = 3;
  13. nextImageId = 0;
  14. }
  15. }, 5000);
  16. // for first image
  17. function change1() {
  18. document.getElementById(&quot;img1&quot;).src = &quot;images/50k.png&quot;;
  19. }
  20. function change2() {
  21. document.getElementById(&quot;img1&quot;).src = &quot;images/50k.png&quot;;
  22. }
  23. // for second image
  24. function change3() {
  25. document.getElementById(&quot;img2&quot;).src = &quot;images/insta-pic.png&quot;;
  26. }
  27. function change4() {
  28. document.getElementById(&quot;img2&quot;).src = &quot;images/insta-pic.png&quot;;
  29. }
  30. // for third image
  31. function change5() {
  32. document.getElementById(&quot;img3&quot;).src = &quot;images/stats.png&quot;;
  33. }
  34. function change6() {
  35. document.getElementById(&quot;img3&quot;).src = &quot;images/stats.png&quot;;
  36. }

<!-- language: lang-css -->

  1. .why-choose-main-container {
  2. border: 1px solid red;
  3. display: flex;
  4. align-items: center;
  5. justify-content: center;
  6. }
  7. .why-choose-main-container .why-choose-details {
  8. border: 2px solid green;
  9. }
  10. .why-choose-main-container .why-choose-details .card {
  11. border: 2px solid red;
  12. }
  13. .why-choose-main-container .why-choose-image {
  14. border: 2px solid blue;
  15. display: flex;
  16. position: relative;
  17. width: 570px;
  18. height: 670px;
  19. }
  20. .why-choose-main-container .why-choose-image img {
  21. position: absolute;
  22. width: 100%;
  23. height: 100%;
  24. }
  25. .why-choose-main-container .why-choose-image img.visible {
  26. display: block;
  27. }
  28. .why-choose-main-container .why-choose-image img.hidden {
  29. display: none;
  30. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;why-choose-main-container&quot;&gt;
  2. &lt;div class=&quot;why-choose-details&quot;&gt;
  3. &lt;div class=&quot;card&quot; onmouseover=&quot;change1()&quot; onmouseout=&quot;change2()&quot;&gt;
  4. &lt;h2&gt;why1&lt;/h2&gt;
  5. &lt;/div&gt;
  6. &lt;div class=&quot;card&quot; onmouseover=&quot;change3()&quot; onmouseout=&quot;change4()&quot;&gt;
  7. &lt;h2&gt;why2&lt;/h2&gt;
  8. &lt;/div&gt;
  9. &lt;div class=&quot;card&quot; onmouseover=&quot;change5()&quot; onmouseout=&quot;change6()&quot;&gt;
  10. &lt;h2&gt;why3&lt;/h2&gt;
  11. &lt;/div&gt;
  12. &lt;/div&gt;
  13. &lt;div class=&quot;why-choose-image&quot;&gt;
  14. &lt;img src=&quot;images/50k.png&quot; alt=&quot;img1&quot; id=&quot;img1&quot; class=&quot;visible&quot;&gt;
  15. &lt;img src=&quot;images/insta-pic.png&quot; alt=&quot;img2&quot; id=&quot;img2&quot; class=&quot;hidden&quot;&gt;
  16. &lt;img src=&quot;images/stats.png&quot; alt=&quot;img3&quot; id=&quot;img3&quot; class=&quot;hidden&quot;&gt;
  17. &lt;/div&gt;
  18. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

以下是翻译好的部分：

You can my solution working here on CodePen.

HTML

  • Each image uses the onmouseover you had but I also added a onmouseout to handle leaving.
  • Each of the images calls the same JS functions but passes in its id as a parameter
  1. <div class="why-choose-main-container">
  2. 	<div class="why-choose-details">
  3. 		<div class="card" onmouseover="onHover('img1')" onmouseout="onHoverLeave('img1')">
  4. 			<h2>why1</h2>
  5. 		</div>
  6. 		<div class="card" onmouseover="onHover('img2')" onmouseout="onHoverLeave('img2')">
  7. 			<h2>why2</h2>
  8. 		</div>
  9. 		<div class="card" onmouseover="onHover('img3')" onmouseout="onHoverLeave('img3')">
  10. 			<h2>why3</h2>
  11. 		</div>
  12. 	</div>
  13. 	<div class="why-choose-image">
  14. 		<img src="images/50k.png" alt="img1" id="img1" class="visible">
  15. 		<img src="images/insta-pic.png" alt="img2" id="img2" class="hidden">
  16. 		<img src="images/stats.png" alt="img3" id="img3" class="hidden">
  17. 	</div>
  18. </div>

JS

  • The timer function keeps track of the active image but only shows it when the hovering effect is not active.
  • onHover is called whenever the mouseover event is called, which calls showHoverImage, a function that hides the active image and shows the hovered image.
  • onHoverLeave does the reverse when the onmouseout event occurs.
  1. var hoverActive = false;
  3. var activeImageId = 1;
  4. var activeImage = document.getElementById("img" + activeImageId);
  6. setInterval(function () {
  7. 	// Work out which image is next
  8. 	var nextImageId = (activeImageId % 3) + 1;
  9. 	var nextImage = document.getElementById("img" + nextImageId);
  11. 	// Change shown image
  12. 	if (!hoverActive) {
  13. 		showImage(nextImage);
  14. 		hideImage(activeImage);
  15. 	}
  17. 	// Next image is now active
  18. 	activeImage = nextImage;
  19. 	activeImageId = nextImageId;
  20. }, 5000);
  22. function onHover(imageName) {
  23. 	hoverActive = true;
  24. 	var hoverImage = document.getElementById(imageName);
  25. 	showHoverImage(hoverImage);
  26. }
  28. function showHoverImage(hoverImage) {
  29. 	hideImage(activeImage);
  30. 	showImage(hoverImage);
  31. }
  33. function onHoverLeave(imageName) {
  34. 	hoverActive = false;
  35. 	var hoverImage = document.getElementById(imageName);
  36. 	hideHoverImage(hoverImage);
  37. }
  39. function hideHoverImage(hoverImage) {
  40. 	hideImage(hoverImage);
  41. 	showImage(activeImage);
  42. }
  44. function showImage(docImage) {
  45. 	if (docImage) {
  46. 		docImage.classList.replace("hidden", "visible");
  47. 	}
  48. }
  50. function hideImage(docImage) {
  51. 	if (docImage) {
  52. 		docImage.classList.replace("visible", "hidden");
  53. 	}
  54. }
英文:

You can my solution working here on CodePen.

HTML

  • Each image uses the onmouseover you had but I also added a onmouseout to handle leaving.
  • Each of the images calls the same JS functions but passes in its id as a parameter
  1. &lt;div class=&quot;why-choose-main-container&quot;&gt;
  2. 	&lt;div class=&quot;why-choose-details&quot;&gt;
  3. 		&lt;div class=&quot;card&quot; onmouseover=&quot;onHover(&#39;img1&#39;)&quot; onmouseout=&quot;onHoverLeave(&#39;img1&#39;)&quot;&gt;
  4. 			&lt;h2&gt;why1&lt;/h2&gt;
  5. 		&lt;/div&gt;
  6. 		&lt;div class=&quot;card&quot; onmouseover=&quot;onHover(&#39;img2&#39;)&quot; onmouseout=&quot;onHoverLeave(&#39;img2&#39;)&quot;&gt;
  7. 			&lt;h2&gt;why2&lt;/h2&gt;
  8. 		&lt;/div&gt;
  9. 		&lt;div class=&quot;card&quot; onmouseover=&quot;onHover(&#39;img3&#39;)&quot; onmouseout=&quot;onHoverLeave(&#39;img3&#39;)&quot;&gt;
  10. 			&lt;h2&gt;why3&lt;/h2&gt;
  11. 		&lt;/div&gt;
  12. 	&lt;/div&gt;
  13. 	&lt;div class=&quot;why-choose-image&quot;&gt;
  14. 		&lt;img src=&quot;images/50k.png&quot; alt=&quot;img1&quot; id=&quot;img1&quot; class=&quot;visible&quot;&gt;
  15. 		&lt;img src=&quot;images/insta-pic.png&quot; alt=&quot;img2&quot; id=&quot;img2&quot; class=&quot;hidden&quot;&gt;
  16. 		&lt;img src=&quot;images/stats.png&quot; alt=&quot;img3&quot; id=&quot;img3&quot; class=&quot;hidden&quot;&gt;
  17. 	&lt;/div&gt;
  18. &lt;/div&gt;

JS

  • The timer function keeps track of the active image but only shows it when the hovering effect is not active
  • onHover is called whenever the mouseover event is called which calls showHoverImage, a function that hides the active image and shows the hovered image
  • onHoverLeave does the reverse when the onmouseout event occurs
  1. var hoverActive = false;
  3. var activeImageId = 1;
  4. var activeImage = document.getElementById(&quot;img&quot; + activeImageId);
  6. setInterval(function () {
  7. 	// Work out which image is next
  8. 	var nextImageId = (activeImageId % 3) + 1;
  9. 	var nextImage = document.getElementById(&quot;img&quot; + nextImageId);
  11. 	// Change shown image
  12. 	if (!hoverActive) {
  13. 		showImage(nextImage);
  14. 		hideImage(activeImage);
  15. 	}
  17. 	//Next image is now active
  18. 	activeImage = nextImage;
  19. 	activeImageId = nextImageId;
  20. }, 5000);
  24. function onHover(imageName) {
  25. 	hoverActive = true;
  26. 	var hoverImage = document.getElementById(imageName);
  27. 	showHoverImage(hoverImage);
  28. }
  30. function showHoverImage(hoverImage) {
  31. 	hideImage(activeImage);
  32. 	showImage(hoverImage);
  33. }
  35. function onHoverLeave(imageName) {
  36. 	hoverActive = false;
  37. 	var hoverImage = document.getElementById(imageName);
  38. 	hideHoverImage(hoverImage);
  39. }
  41. function hideHoverImage(hoverImage) {
  42. 	hideImage(hoverImage);
  43. 	showImage(activeImage);
  44. }
  47. function showImage(docImage) {
  48. 	if (docImage) {
  49. 		docImage.classList.replace(&quot;hidden&quot;, &quot;visible&quot;);
  50. 	}
  51. }
  52. function hideImage(docImage) {
  53. 	if (docImage) {
  54. 		docImage.classList.replace(&quot;visible&quot;, &quot;hidden&quot;);
  55. 	}
  56. }

答案2

得分: 0

我尝试更改了函数和JS代码。这是你的理想吗？

  1. var activeImageId = 1;
  2. var nextImageId = 1;
  4. setInterval(function() {
  5.     nextImageId = nextImageId + 1;
  6.     changeImgByID();
  7. }, 5000);
  9. function changeImgByID() {
  10.   if (nextImageId < 3) {
  11.         document.getElementById("img" + activeImageId).classList.replace("visible", "hidden");
  12.         document.getElementById("img" + nextImageId).classList.replace("hidden", "visible");
  13.         activeImageId = nextImageId;
  14.     } else {
  15.         document.getElementById("img" + activeImageId).classList.replace("visible", "hidden");
  16.         document.getElementById("img" + nextImageId).classList.replace("hidden", "visible");
  17.         activeImageId = 3;
  18.         nextImageId = 0;
  19.     }
  20. }
  22. // for first image
  23. function changeImg(val) {
  24.     nextImageId=val;
  25.     changeImgByID();
  26. }
  1. .why-choose-main-container {
  2.     border: 1px solid red;
  3.     display: flex;
  4.     align-items: center;
  5.     justify-content: center;
  6. }
  8. .why-choose-main-container .why-choose-details {
  9.     border: 2px solid green;
  10. }
  12. .why-choose-main-container .why-choose-details .card {
  13.     border: 2px solid red;
  14. }
  16. .why-choose-main-container .why-choose-image {
  17.     border: 2px solid blue;
  18.     display: flex;
  19.     position: relative;
  20.     width: 570px;
  21.     height: 670px;
  22. }
  24. .why-choose-main-container .why-choose-image img {
  25.     position: absolute;
  26.     width: 100%;
  27.     height: 100%;
  28. }
  30. .why-choose-main-container .why-choose-image img.visible {
  31.     display: block;
  32. }
  34. .why-choose-main-container .why-choose-image img.hidden {
  35.     display: none;
  36. }
  1. <div class="why-choose-main-container">
  2.     <div class="why-choose-details">
  3.         <div class="card img-1" onmouseover="changeImg(1)">
  4.             <h2>why1</h2>
  5.         </div>
  6.         <div class="card img-2" onmouseover="changeImg(2)">
  7.             <h2>why2</h2>
  8.         </div>
  9.         <div class="card img-3" onmouseover="changeImg(3)">
  10.             <h2>why3</h2>
  11.         </div>
  12.     </div>
  13.     <div class="why-choose-image">
  14.         <img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="img1" id="img1" class="visible">
  15.         <img src="https://www.w3schools.com/html/img_girl.jpg" alt="img2" id="img2" class="hidden">
  16.         <img src="https://www.w3schools.com/html/img_chania.jpg" alt="img3" id="img3" class="hidden">
  17.     </div>
  18. </div>
英文:

I tried to change the function and JS code. Is that your ideal?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. var activeImageId = 1;
  2. var nextImageId = 1;
  3. setInterval(function() {
  4. nextImageId = nextImageId + 1;
  5. changeImgByID();
  6. }, 5000);
  7. function changeImgByID() {
  8. if (nextImageId &lt; 3) {
  9. document.getElementById(&quot;img&quot; + activeImageId).classList.replace(&quot;visible&quot;, &quot;hidden&quot;);
  10. document.getElementById(&quot;img&quot; + nextImageId).classList.replace(&quot;hidden&quot;, &quot;visible&quot;);
  11. activeImageId = nextImageId;
  12. } else {
  13. document.getElementById(&quot;img&quot; + activeImageId).classList.replace(&quot;visible&quot;, &quot;hidden&quot;);
  14. document.getElementById(&quot;img&quot; + nextImageId).classList.replace(&quot;hidden&quot;, &quot;visible&quot;);
  15. activeImageId = 3;
  16. nextImageId = 0;
  17. }
  18. }
  19. // for first image
  20. function changeImg(val) {
  21. nextImageId=val;
  22. changeImgByID();
  23. }

<!-- language: lang-css -->

  1. .why-choose-main-container {
  2. border: 1px solid red;
  3. display: flex;
  4. align-items: center;
  5. justify-content: center;
  6. }
  7. .why-choose-main-container .why-choose-details {
  8. border: 2px solid green;
  9. }
  10. .why-choose-main-container .why-choose-details .card {
  11. border: 2px solid red;
  12. }
  13. .why-choose-main-container .why-choose-image {
  14. border: 2px solid blue;
  15. display: flex;
  16. position: relative;
  17. width: 570px;
  18. height: 670px;
  19. }
  20. .why-choose-main-container .why-choose-image img {
  21. position: absolute;
  22. width: 100%;
  23. height: 100%;
  24. }
  25. .why-choose-main-container .why-choose-image img.visible {
  26. display: block;
  27. }
  28. .why-choose-main-container .why-choose-image img.hidden {
  29. display: none;
  30. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;why-choose-main-container&quot;&gt;
  2. &lt;div class=&quot;why-choose-details&quot;&gt;
  3. &lt;div class=&quot;card img-1&quot; onmouseover=&quot;changeImg(1)&quot;&gt;
  4. &lt;h2&gt;why1&lt;/h2&gt;
  5. &lt;/div&gt;
  6. &lt;div class=&quot;card img-2&quot; onmouseover=&quot;changeImg(2)&quot;&gt;
  7. &lt;h2&gt;why2&lt;/h2&gt;
  8. &lt;/div&gt;
  9. &lt;div class=&quot;card img-3&quot; onmouseover=&quot;changeImg(3)&quot;&gt;
  10. &lt;h2&gt;why3&lt;/h2&gt;
  11. &lt;/div&gt;
  12. &lt;/div&gt;
  13. &lt;div class=&quot;why-choose-image&quot;&gt;
  14. &lt;img src=&quot;https://www.w3schools.com/html/pic_trulli.jpg&quot; alt=&quot;img1&quot; id=&quot;img1&quot; class=&quot;visible&quot;&gt;
  15. &lt;img src=&quot;https://www.w3schools.com/html/img_girl.jpg&quot; alt=&quot;img2&quot; id=&quot;img2&quot; class=&quot;hidden&quot;&gt;
  16. &lt;img src=&quot;https://www.w3schools.com/html/img_chania.jpg&quot; alt=&quot;img3&quot; id=&quot;img3&quot; class=&quot;hidden&quot;&gt;
  17. &lt;/div&gt;
  18. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月10日 13:46:09
  • 转载请务必保留本文链接：https://go.coder-hub.com/76872919.html
  • css
  • html
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定