如何去除引号或从这个（JavaScript）中获取元素

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

how to remove the quotes or get element from this (javascript)

问题

以下是您要的翻译部分：

"As topic, how can I remove the quote in the picuture below or get the img element from this?
(https://i.stack.imgur.com/kdPAP.png)

I m new to javascript and start making an image slider that can pop up a window while clicked to the image.

I cloned the li object which is clicked, and try to open it in the new window, it do work but how can I get the img only without the li?

Right now i m trying to call the cloned this object with innerHTML, but it shows the img element with quote, is there any way to remove the quote?
the quote that i want to remove

first time ask a question in here, if i violate any rules in the post, i delete the post, sorry for causing any inconvenience."

"这是您的代码的一部分："

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <style>
  6.         .risuto1 {
  7.             max-width: 480px;
  8.             max-height: 270px;
  9.             margin: auto;
  10.             position: relative;
  11.         }
  13.         ul {
  14.             list-style-type: none;
  15.             margin: auto;
  16.             padding: 0;
  17.         }
  19.         .aitemu>img {
  20.             max-width: 100%;
  21.         }
  23.         .aitemu {
  24.             display: none;
  25.             position: relative;
  26.         }
  28.         .aitemu.akutibu {
  29.             display: block;
  30.         }
  32.         .risuto1>.mae,
  33.         .tsugi {
  34.             width: auto;
  35.             height: auto;
  36.             padding: 20px;
  37.             top: 102.6px;
  38.             position: absolute;
  39.             cursor: pointer;
  40.             background-color: red;
  41.         }
  43.         .risuto1>.tsugi {
  44.             left: 431.8px;
  45.         }
  46.     </style>
  47. </head>
  49. <body>
  50.     <script>
  51.         var risuto1 = document.createElement("div");
  52.         risuto1.classList.add("risuto1");
  53.         document.body.appendChild(risuto1);
  55.         var suraidaaitemu = document.createElement("ul");
  56.         suraidaaitemu.classList.add("suraidaaitemu");
  57.         risuto1.appendChild(suraidaaitemu);
  59.         var imejisosurisuto = ["https://pbs.twimg.com/media/CGGc3wKVEAAjmWj?format=jpg&name=medium", "https://pbs.twimg.com/media/EYCXvuzU8AEepqD?format=jpg&name=large", "https://s3-ap-northeast-1.amazonaws.com/cdn.bibi-star.jp/production/imgs/images/000/668/074/original.jpg?1626914998", "https://livedoor.blogimg.jp/rin20064/imgs/7/3/73251146.jpg", "https://www.tbs.co.jp/anime/oregairu/character/img/chara_img_02.jpg"]
  60.         //var imejirisuto=[]
  62.         for (var n = 0; n < imejisosurisuto.length; n++) {
  63.             var imeji = document.createElement("img");
  64.             imeji.src = imejisosurisuto[n];
  66.             var aitemu = document.createElement("li");
  67.             aitemu.classList.add("aitemu");
  68.             suraidaaitemu.appendChild(aitemu);
  70.             aitemu.appendChild(imeji);
  72.             aitemu.onclick=atarashivindou;
  73.         }
  75.         var akutibunasaishonoko = document.querySelector(".suraidaaitemu").firstChild;
  76.         akutibunasaishonoko.classList.add("akutibu");
  78.         var mae = document.createElement("div");
  79.         mae.classList.add("mae");
  80.         mae.innerHTML = "&#10094";
  81.         risuto1.appendChild(mae);
  83.         var tsugi = document.createElement("div");
  84.         tsugi.classList.add("tsugi");
  85.         tsugi.innerHTML = "&#10095";
  86.         risuto1.appendChild(tsugi);
  88.         var tensuu = 0;
  89.         var suraido = document.querySelector(".suraidaaitemu").children;
  90.         var gokeisuraido = suraido.length;
  92.         tsugi.onclick = function () {
  93.             Tsugi("Tsugi");
  94.         }
  96.         mae.onclick = function () {
  97.             Tsugi("Mae");
  98.         }
  100.         function Tsugi(houkou) {
  101.             if (houkou == "Tsugi") {
  102.                 tensuu++;
  103.                 if (tensuu == gokeisuraido) {
  104.                     tensuu = 0;
  105.                 }
  106.             }
  107.             else {
  108.                 if (tensuu == 0) {
  109.                     tensuu = gokeisuraido - 1;
  110.                 }
  111.                 else {
  112.                     tensuu--;
  113.                 }
  115.             for (var i = 0; i < suraido.length; i++) {
  116.                 suraido[i].classList.remove("akutibu");
  117.             }
  118.             suraido[tensuu].classList.add("akutibu");
  119.         }
  121.         function atarashivindou(){
  122.             var Atarashivindou = window.open("", "_blank", "width: 1000px, max-height: 562.5px");
  124.             var kakudaigazou=document.createElement("div");
  125.             kakudaigazou.classList.add("kakudaigazou");
  126.             Atarashivindou.document.body.appendChild(kakudaigazou);
  128.             var koronaitemu=this.cloneNode(true);
  129.             var koronimeji=koronaitemu.innerHTML;
  130.             kakudaigazou.append(koronimeji);
  131.         }
  132.     </script>
  133. </body>
英文:

As topic, how can I remove the quote in the picuture below or get the img element from this?
(https://i.stack.imgur.com/kdPAP.png)

I m new to javascript and start making an image slider that can pop up a window while clicked to the image.

I cloned the li object which is clicked, and try to open it in the new window, it do work but how can I get the img only without the li?

Right now i m trying to call the cloned this object with innerHTML, but it shows the img element with quote, is there any way to remove the quote?
the quote that i want to remove

first time ask a question in here, if i violate any rules in the post, i delete the post, sorry for causing any inconvenience.

Here is the code

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  4. &lt;head&gt;
  5.     &lt;style&gt;
  6.         .risuto1 {
  7.             max-width: 480px;
  8.             max-height: 270px;
  10.             margin: auto;
  11.             position: relative;
  12.         }
  14.         ul {
  15.             list-style-type: none;
  16.             margin: auto;
  17.             padding: 0;
  18.         }
  20.         .aitemu&gt;img {
  21.             max-width: 100%;
  22.         }
  24.         .aitemu {
  25.             display: none;
  26.             position: relative;
  27.         }
  29.         .aitemu.akutibu {
  30.             display: block;
  31.         }
  33.         .risuto1&gt;.mae,
  34.         .tsugi {
  35.             width: auto;
  36.             height: auto;
  38.             padding: 20px;
  39.             top: 102.6px;
  41.             position: absolute;
  43.             cursor: pointer;
  45.             background-color: red;
  46.         }
  48.         .risuto1&gt;.tsugi {
  49.             left: 431.8px;
  50.         }
  51.     &lt;/style&gt;
  52. &lt;/head&gt;
  54. &lt;body&gt;
  55.     &lt;script&gt;
  56.         var risuto1 = document.createElement(&quot;div&quot;);
  57.         risuto1.classList.add(&quot;risuto1&quot;);
  58.         document.body.appendChild(risuto1);
  60.         var suraidaaitemu = document.createElement(&quot;ul&quot;);
  61.         suraidaaitemu.classList.add(&quot;suraidaaitemu&quot;);
  62.         risuto1.appendChild(suraidaaitemu);
  64.         var imejisosurisuto = [&quot;https://pbs.twimg.com/media/CGGc3wKVEAAjmWj?format=jpg&amp;name=medium&quot;, &quot;https://pbs.twimg.com/media/EYCXvuzU8AEepqD?format=jpg&amp;name=large&quot;, &quot;https://s3-ap-northeast-1.amazonaws.com/cdn.bibi-star.jp/production/imgs/images/000/668/074/original.jpg?1626914998&quot;, &quot;https://livedoor.blogimg.jp/rin20064/imgs/7/3/73251146.jpg&quot;, &quot;https://www.tbs.co.jp/anime/oregairu/character/img/chara_img_02.jpg&quot;]
  65.         //var imejirisuto=[]
  67.         for (var n = 0; n &lt; imejisosurisuto.length; n++) {
  68.             var imeji = document.createElement(&quot;img&quot;);
  69.             imeji.src = imejisosurisuto[n];
  71.             var aitemu = document.createElement(&quot;li&quot;);
  72.             aitemu.classList.add(&quot;aitemu&quot;);
  73.             suraidaaitemu.appendChild(aitemu);
  75.             aitemu.appendChild(imeji);
  77.             aitemu.onclick=atarashivindou;
  78.         }
  80.         var akutibunasaishonoko = document.querySelector(&quot;.suraidaaitemu&quot;).firstChild;
  81.         akutibunasaishonoko.classList.add(&quot;akutibu&quot;);
  83.         var mae = document.createElement(&quot;div&quot;);
  84.         mae.classList.add(&quot;mae&quot;);
  85.         mae.innerHTML = &quot;&amp;#10094&quot;;
  86.         risuto1.appendChild(mae);
  88.         var tsugi = document.createElement(&quot;div&quot;);
  89.         tsugi.classList.add(&quot;tsugi&quot;);
  90.         tsugi.innerHTML = &quot;&amp;#10095&quot;;
  91.         risuto1.appendChild(tsugi);
  93.         var tensuu = 0;
  94.         var suraido = document.querySelector(&quot;.suraidaaitemu&quot;).children;
  95.         var gokeisuraido = suraido.length;
  97.         tsugi.onclick = function () {
  98.             Tsugi(&quot;Tsugi&quot;);
  99.         }
  101.         mae.onclick = function () {
  102.             Tsugi(&quot;Mae&quot;);
  103.         }
  105.         function Tsugi(houkou) {
  106.             if (houkou == &quot;Tsugi&quot;) {
  107.                 tensuu++;
  108.                 if (tensuu == gokeisuraido) {
  109.                     tensuu = 0;
  110.                 }
  111.             }
  112.             else {
  113.                 if (tensuu == 0) {
  114.                     tensuu = gokeisuraido - 1;
  115.                 }
  116.                 else {
  117.                     tensuu--;
  118.                 }
  119.             }
  121.             for (var i = 0; i &lt; suraido.length; i++) {
  122.                 suraido[i].classList.remove(&quot;akutibu&quot;);
  123.             }
  124.             suraido[tensuu].classList.add(&quot;akutibu&quot;);
  125.         }
  127.         function atarashivindou(){
  128.             var Atarashivindou = window.open(&quot;&quot;, &quot;_blank&quot;, &quot;width: 1000px, max-height: 562.5px&quot;);
  130.             var kakudaigazou=document.createElement(&quot;div&quot;);
  131.             kakudaigazou.classList.add(&quot;kakudaigazou&quot;);
  132.             Atarashivindou.document.body.appendChild(kakudaigazou);
  134.             var koronaitemu=this.cloneNode(true);
  135.             var koronimeji=koronaitemu.innerHTML;
  136.             kakudaigazou.append(koronimeji);
  137.         }
  138.     &lt;/script&gt;
  139. &lt;/body&gt;

答案1

得分: 0

.innerHTML是一个字符串。你不想追加字符串，而是要追加元素。所以将这部分代码修改为：

  1. var koronimeji = this.querySelector("img").cloneNode();
  2. kakudaigazou.append(koronimeji);
英文:

.innerHTML is a string. You don't want to append a string, but the element. So change this:

  1.         var koronaitemu=this.cloneNode(true);
  2.         var koronimeji=koronaitemu.innerHTML;
  3.         kakudaigazou.append(koronimeji);

...to this:

  1.         var koronimeji=this.querySelector(&quot;img&quot;).cloneNode();
  2.         kakudaigazou.append(koronimeji);

huangapple
  • 本文由 发表于 2023年2月18日 07:30:03
  • 转载请务必保留本文链接：https://go.coder-hub.com/75490123.html
  • html
  • javascript
匿名

发表评论

匿名网友

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

确定