我试图使用'onclick'注入php而不是文本作为innerhtml。此脚本显示在我网站的'head'中。我有一个数据过滤器来显示类别下的图像。 “点击”显示图像。在图像下方应显示php as text-标题，位于其下的类别和说明。如果将其保留为纯正的innerhtml，则所有方法都适用。它不是php echo。我真的很想这样做，以便可以从CMS（数据库）管理标题和描述。 1 [这是图像显示类型的示例] http://bootstraplovers.com/assan-kit-v3.7/bootstrap4/website-templates/classic-template/html/folio-mosaic-full.html）<< / p>
<!-- script for product category and description -->
<script>
function clearText(){ //clears all TEXT when ALL link clicked
document.getElementById('productCategoryName').innerHTML="";
document.getElementById('productDescription').innerHTML="";
}
function getDetails_Propagation(){ //get details for Propagation products when PROPAGATION link clicked
<?php
$query = "SELECT * FROM tbl_product WHERE product_categoryID=4";
$result = mysqli_query($link, $query);
while ($row = mysqli_fetch_array($result)) {
extract($row);
?>
document.getElementById('productCategoryName').innerHTML="<?php echo $row['product_categoryName']; ?>";
document.getElementById('productDescription').innerHTML="<?php echo $row['description']; ?>";
<?php
} //end of while
?>
}
function getDetails_Ventilation(){ //get details for Ventilation products when VENTILATION link clicked
<?php
$query = "SELECT * FROM tbl_product WHERE product_categoryID=7";
$result = mysqli_query($link, $query);
while ($row = mysqli_fetch_array($result)) {
extract($row);
?>
document.getElementById('productCategoryName').innerHTML="<?php echo $row['product_categoryName']; ?>";
document.getElementById('productDescription').innerHTML="<?php echo $row['description']; ?>";
<?php
} //end of while
?>
}
function getDetails_Heaters(){ //get details for Heaters products when HEATERS link clicked
<?php
$query = "SELECT * FROM tbl_product WHERE product_categoryID=8";
$result = mysqli_query($link, $query);
while ($row = mysqli_fetch_array($result)) {
extract($row);
?>
document.getElementById('productCategoryName').innerHTML="<?php echo $row['product_categoryName']; ?>";
document.getElementById('productDescription').innerHTML="<?php echo $row['description']; ?>";
<?php
} //end of while
?>
}
function getDetails_Screens(){ //get details for Screens products when SCREENS link clicked
<?php
$query = "SELECT * FROM tbl_product WHERE product_categoryID=6";
$result = mysqli_query($link, $query);
while ($row = mysqli_fetch_array($result)) {
extract($row);
?>
document.getElementById('productCategoryName').innerHTML="<?php echo $row['product_categoryName']; ?>";
document.getElementById('productDescription').innerHTML="<?php echo $row['description']; ?>";
<?php
} //end of while
?>
}
</script>
</head>
<body>
<ul class="filter list-inline">
<li><a class="active" href="#" data-filter="*" onclick="clearText()">Show All</a></li>
<li><a href="#" data-filter=".photography" onclick="getDetails_Propagation()">Propagation</a></li>
<li><a href="#" data-filter=".illustration" onclick="getDetails_Ventilation()">Ventilation</a></li>
<li><a href="#" data-filter=".branding" onclick="getDetails_Heaters()">Heaters</a></li>
<li><a href="#" data-filter=".web-design" onclick="getDetails_Screens()">Screens</a></li>
</ul>
<div class="portfolio-box iso-call col-5-no-space">
<div class="project-post branding">
<div class="img-icon">
<img src="images/products/Heaters_1.jpg" class="img-responsive" alt="heaters">
<div class="img-icon-overlay">
<p>
<a href="images/products/Heaters_1.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post web-design">
<div class="img-icon">
<img src="images/products/screen1.jpg" class="img-responsive" alt="screens">
<div class="img-icon-overlay">
<p>
<a href="images/products/screen1.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post web-design">
<div class="img-icon">
<img src="images/products/screen2.jpg" class="img-responsive" alt="screens">
<div class="img-icon-overlay">
<p>
<a href="images/products/screen2.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post web-design">
<div class="img-icon">
<img src="images/products/screen3.jpg" class="img-responsive" alt="screens">
<div class="img-icon-overlay">
<p>
<a href="images/products/screen3.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post branding">
<div class="img-icon">
<img src="images/products/Heaters_2.jpg" class="img-responsive" alt="heaters">
<div class="img-icon-overlay">
<p>
<a href="images/products/Heaters_2.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post END ROW ONE-->
<div class="project-post illustration">
<div class="img-icon">
<img src="images/products/Ventilation_extractorFan1.jpg" class="img-responsive" alt="ventilation">
<div class="img-icon-overlay">
<p>
<a href="images/products/Ventilation_extractorFan1.jpg"" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post branding">
<div class="img-icon">
<img src="images/products/Heaters_3.jpg" class="img-responsive" alt="heaters">
<div class="img-icon-overlay">
<p>
<a href="images/products/Heaters_3.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post web-design">
<div class="img-icon">
<img src="images/products/screen4.jpg" class="img-responsive" alt="screens">
<div class="img-icon-overlay">
<p>
<a href="images/products/screen4.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post web-design">
<div class="img-icon">
<img src="images/products/screen5.jpg" class="img-responsive" alt="screens">
<div class="img-icon-overlay">
<p>
<a href="images/products/screen5.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post web-design">
<div class="img-icon">
<img src="images/products/screen6.jpg" class="img-responsive" alt="">
<div class="img-icon-overlay">
<p>
<a href="images/products/screen6.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post END ROW TWO-->
<div class="project-post photography">
<div class="img-icon">
<img src="images/products/propagation_armMistController.jpg" class="img-responsive" alt="">
<div class="img-icon-overlay">
<p>
<a href="images/products/propagation_armMistController.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post photography">
<div class="img-icon">
<img src="images/products/propagation_thermostat.jpg" class="img-responsive" alt="propagation">
<div class="img-icon-overlay">
<p>
<a href="images/products/propagation_thermostat.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post photography">
<div class="img-icon">
<img src="images/products/propagation_armMistController2.jpg" class="img-responsive" alt="propagation">
<div class="img-icon-overlay">
<p>
<a href="images/products/propagation_armMistController2.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post photography">
<div class="img-icon">
<img src="images/products/propagation_soilwarmingCable.jpg" class="img-responsive" alt="propagation">
<div class="img-icon-overlay">
<p>
<a href="images/products/propagation_soilwarmingCable.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post illustration">
<div class="img-icon">
<img src="images/products/Ventilation_extractorFan2.jpg" class="img-responsive" alt="ventiliation">
<div class="img-icon-overlay">
<p>
<a href="images/products/Ventilation_extractorFan2.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post END ROW THREE-->
<div class="project-post photography">
<div class="img-icon">
<img src="images/products/propagation_soilwarmingCable2.jpg" class="img-responsive" alt="propagation">
<div class="img-icon-overlay">
<p>
<a href="images/products/propagation_soilwarmingCable2.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post illustration ">
<div class="img-icon">
<img src="images/products/Ventilation_airInlet1.jpg" class="img-responsive" alt="ventilation">
<div class="img-icon-overlay">
<p>
<a href="images/products/Ventilation_airInlet1.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post photography">
<div class="img-icon">
<img src="images/products/propagation_thermostat2.gif" class="img-responsive" alt="propagation">
<div class="img-icon-overlay">
<p>
<a href="images/products/propagation_thermostat2.gif" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post photography">
<div class="img-icon">
<img src="images/products/propagation_thermostat3.gif" class="img-responsive" alt="propagation">
<div class="img-icon-overlay">
<p>
<a href="images/products/propagation_thermostat3.gif" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post illustration">
<div class="img-icon">
<img src="images/products/Ventilation_airInlet2.jpg" class="img-responsive" alt="ventilation">
<div class="img-icon-overlay">
<p>
<a href="images/products/Ventilation_airInlet2.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post END ROW FOUR-->
<div class="project-post illustration">
<div class="img-icon">
<img src="images/products/Ventilation_airInlet3.jpg" class="img-responsive" alt="ventilation">
<div class="img-icon-overlay">
<p>
<a href="images/products/Ventilation_airInlet3.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post illustration ">
<div class="img-icon">
<img src="images/products/Ventilation_extractorFan3.jpg" class="img-responsive" alt="ventilation">
<div class="img-icon-overlay">
<p>
<a href="images/products/Ventilation_extractorFan3.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post illustration">
<div class="img-icon">
<img src="images/products/Ventilation_stirrerFan1.jpg" class="img-responsive" alt="ventilation">
<div class="img-icon-overlay">
<p>
<a href="images/products/Ventilation_stirrerFan1.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post illustration">
<div class="img-icon">
<img src="images/products/Ventilation_stirrerFan2.jpg" class="img-responsive" alt="ventilation">
<div class="img-icon-overlay">
<p>
<a href="images/products/Ventilation_stirrerFan2.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post-->
<div class="project-post illustration">
<div class="img-icon">
<img src="images/products/Ventilation_stirrerFan3.jpg" class="img-responsive" alt="ventilation">
<div class="img-icon-overlay">
<p>
<a href="images/products/Ventilation_stirrerFan3.jpg" class="show-image"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-sliders"></i></a>
</p>
</div>
</div> <!--img-icon-->
</div><!--project post END ROW FIVE-->
</div>
</div> <!--end portfolio-box-->
<!-- product category details -->
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="blog-post">
<h2 id="productCategoryName"></h2> <!-- function in head -->
<p id="productDescription"></p> <!-- function in head -->
</div><!--blog post-->
</div><!--end col-->
</div><!--row for blog post-->
</div> <!--full width-->
</div> <!--end container-->
</body>
答案 0 :(得分：0)
我没有信誉发表评论，请尝试
<?php echo "<script>document.getElementById('productCategoryName').innerHTML=". $row['product_categoryName']."</script>" ?>
我希望此代码仅用于学习而非实际生产。
希望对您有所帮助！