Question

我正在建立一个网站，在网站的其中一个网页中，我想根据从网站上获取的数据在网页中添加或删除span元素（也可以是div元素）。

以下是代码：

HTML PART：

<html>  
<span class="t1"><input type="text" class="t1" id="t1s<?php the_ID(); ?>">
</span>   <span id="star1s<?php the_ID(); ?>" class="rating1"></span>   
<hr>                            
<span class="t2"><input type="text" class="t2" id="t2s<?php the_ID(); ?>">
</span>   <span id="star2s<?php the_ID(); ?>" class="rating2"></span>   
<hr>                            
<span class="t3"><input type="text" class="t3" id="t3s<?php the_ID(); ?>">
</span>   <span id="star3s<?php the_ID(); ?>" class="rating3"></span>   
<hr>                            
<span class="t4"><input type="text" class="t4" id="t4s<?php the_ID(); ?>">
</span>   <span id="star4s<?php the_ID(); ?>" class="rating4"></span>   
<hr>                            
</html>

在html部分中，应根据从数据库中提取的数据添加或删除span部分。以下是我需要添加或删除的代码，

 <span class="t4"><input type="text" class="t4" id="t4s<?php the_ID(); ?>">
</span>   <span id="star4s<?php the_ID(); ?>" class="rating4"></span>   
<hr>

JAVASCRIPT PART：

<script>
var getstarid = "<?php the_ID();?>";

function rating1( stars1 ) {
var ratingfill1=stars1;
var rating_integer1=Math.floor(ratingfill1);
var rating_decimal1=ratingfill1%1;
var rating_dec_trimmed1=rating_decimal1.toFixed(1);  
if((rating_dec_trimmed1==0.1)||(rating_dec_trimmed1==0.2)||
(rating_dec_trimmed1==0.3)||(rating_dec_trimmed1==0.4))
{document.getElementById("star1s"+getstarid).style.width = 
((40*rating_integer1)+18) + 'px';}
if((rating_dec_trimmed1==0.6)||(rating_dec_trimmed1==0.7)||
(rating_dec_trimmed1==0.8)||(rating_dec_trimmed1==0.9))
{document.getElementById("star1s"+getstarid).style.width = 
((40*rating_integer1)+28) + 'px';}
if(rating_dec_trimmed1==0.5)
{document.getElementById("star1s"+getstarid).style.width = 
((40*rating_integer1)+20) + 'px';}
if(rating_dec_trimmed1==0)
{document.getElementById("star1s"+getstarid).style.width = 
(40*rating_integer1) + 'px';}
 }

function rating2( stars2 ) {
var ratingfill2=stars2;
var rating_integer2=Math.floor(ratingfill2);
var rating_decimal2=ratingfill2%1;
var rating_dec_trimmed2=rating_decimal2.toFixed(1);  
if((rating_dec_trimmed2==0.1)||(rating_dec_trimmed2==0.2)||
(rating_dec_trimmed2==0.3)||(rating_dec_trimmed2==0.4))
{document.getElementById("star2s"+getstarid).style.width = 
((40*rating_integer2)+18) + 'px';}
if((rating_dec_trimmed2==0.6)||(rating_dec_trimmed2==0.7)||
(rating_dec_trimmed2==0.8)||(rating_dec_trimmed2==0.9))
{document.getElementById("star2s"+getstarid).style.width = 
((40*rating_integer2)+28) + 'px';}
if(rating_dec_trimmed2==0.5)
{document.getElementById("star2s"+getstarid).style.width = 
((40*rating_integer2)+20) + 'px';}
if(rating_dec_trimmed2==0)
{document.getElementById("star2s"+getstarid).style.width = 
(40*rating_integer2) + 'px';}
 }

function rating3( stars3 ) {
var ratingfill3=stars3;
var rating_integer3=Math.floor(ratingfill3);
var rating_decimal3=ratingfill3%1;
var rating_dec_trimmed3=rating_decimal3.toFixed(1);  
if((rating_dec_trimmed3==0.1)||(rating_dec_trimmed3==0.2)||
(rating_dec_trimmed3==0.3)||(rating_dec_trimmed3==0.4))
{document.getElementById("star3s"+getstarid).style.width = 
((40*rating_integer3)+18) + 'px';}
if((rating_dec_trimmed3==0.6)||(rating_dec_trimmed3==0.7)||
(rating_dec_trimmed3==0.8)||(rating_dec_trimmed3==0.9))
{document.getElementById("star3s"+getstarid).style.width = 
((40*rating_integer3)+28) + 'px';}
if(rating_dec_trimmed3==0.5)
{document.getElementById("star3s"+getstarid).style.width = 
((40*rating_integer3)+20) + 'px';}
if(rating_dec_trimmed3==0)
{document.getElementById("star3s"+getstarid).style.width = 
(40*rating_integer3) + 'px';}
 }

function rating4( stars4 ) {
var ratingfill4=stars4;
var rating_integer4=Math.floor(ratingfill4);
var rating_decimal4=ratingfill4%1;
var rating_dec_trimmed4=rating_decimal4.toFixed(1);  
if((rating_dec_trimmed4==0.1)||(rating_dec_trimmed4==0.2)||
(rating_dec_trimmed4==0.3)||(rating_dec_trimmed4==0.4))
{document.getElementById("star4s"+getstarid).style.width = 
((40*rating_integer4)+18) + 'px';}
if((rating_dec_trimmed4==0.6)||(rating_dec_trimmed4==0.7)||
(rating_dec_trimmed4==0.8)||(rating_dec_trimmed4==0.9))
{document.getElementById("star4s"+getstarid).style.width = 
((40*rating_integer4)+28) + 'px';}
if(rating_dec_trimmed4==0.5)
{document.getElementById("star4s"+getstarid).style.width = 
((40*rating_integer4)+20) + 'px';}
if(rating_dec_trimmed4==0)
{document.getElementById("star4s"+getstarid).style.width = 
(40*rating_integer4) + 'px';}
 }

var second=0,third=0,fourth=0;

var getrate1 = "<?php echo $ratingonequery;?>";
var getrate2 = "<?php echo $ratingtwoquery;?>";
var getrate3 = "<?php echo $ratingthreequery;?>";
var getrate4 = "<?php echo $ratingfourquery;?>";
var getratename1 = "<?php echo $ratingnameonequery; ?>";
var getratename2 = "<?php echo $ratingnametwoquery; ?>";
var getratename3 = "<?php echo $ratingnamethreequery; ?>";
var getratename4 = "<?php echo $ratingnamefourquery; ?>";


 //below is part of javascript that serves as the logic for adding or 
 //removing span element
if((getrate1!="")&&(getratename1!=""))
{rating1(getrate1);document.getElementById("t1s"+getstarid).value 
 =getratename1;}

{
if((getrate2!="")&&(getratename2!="")){second=1;
rating2(getrate2);document.getElementById("t2s"+getstarid).value 
=getratename2;
}
 else if((getrate3!="")&&(getratename3!="")){third=1;
 rating2(getrate3);document.getElementById("t2s"+getstarid).value 
 =getratename3;
        }
 else if((getrate4!="")&&(getratename4!="")){fourth=1;
 rating2(getrate4);document.getElementById("t2s"+getstarid).value 
 =getratename4;
        }           
  }

  {
  if((getrate3!="")&&(getratename3!="")&&(third==0)){third=1;
  rating3(getrate3);document.getElementById("t3s"+getstarid).value 
  =getratename3;
   }
  else if((getrate4!="")&&(getratename4!="")&&(fourth==0)){fourth=1;
  rating3(getrate4);document.getElementById("t3s"+getstarid).value 
  =getratename4;
        }
   }

  if((getrate4!="")&&(getratename4!="")&&(fourth==0)){fourth=1;
  rating4(getrate4);document.getElementById("t4s"+getstarid).value 
  =getratename4;
  } 
 document.getElementById("t1s"+getstarid).disabled = true;
 document.getElementById("t2s"+getstarid).disabled = true;
 document.getElementById("t3s"+getstarid).disabled = true;
 document.getElementById("t4s"+getstarid).disabled = true;
 </script>

CSS PART：

<style>
.rating1,.rating2,.rating3,.rating4 {
font-size: 48px;
color: #0095f9;
display: inline-block;
overflow: hidden;
}
 .rating1::before { 
  content: "\2605\2605\2605\2605\2605" 
 }
 .rating2::before { 
  content: "\2605\2605\2605\2605\2605" 
  }
  .rating3::before { 
   content: "\2605\2605\2605\2605\2605" 
   }
   .rating4::before { 
    content: "\2605\2605\2605\2605\2605" 
    }
   .t1,.t2,.t3,.t4{background-color:#ffffff;
    float:left;font-size:20px;
    padding: -3px;
    border: none;
    border-bottom: solid 1px #0095f9;
    outline: none;
     }
 </style>

我还包括截图。

那么，如何在javascript部分中按逻辑添加或删除html部分中的span元素。

提前感谢你。

Answer 1

你应该阅读w3schools以了解正确的内容和方法：
对于javascript：https://www.w3schools.com/jsref/met_node_appendchild.asp
对于jquery：https://www.w3schools.com/jquery/html_append.asp

你也会在这些页面中找到removechild和remove（）。

您还可以阅读MDN文档，以便更全面地了解该主题。

$(document).ready(function(){
  $("#del").on('click',function(){
    $("#delete").remove();
  })
  $("#add").on('click',function(){
    $("#hello").append("<br><span id='added'>I got added</span><br>");
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

<span id='hello'>Hello</span><br>
<span id='delete'> I will get deleted</span><br>

<input type="button" id='del' value='Delete span'><br>
<input type="button" id="add" value='Add span'>
</div>

如何使用javascript添加，删除html中的div或span？

1 个答案: