[英]Javascript: how to write document.getElementsByClassName() inside while loop in php
How to write for loop inside php while loop? php while循环内如何编写for循环?
I have numDifferentiation()
javascript function. 我有numDifferentiation()
JavaScript函数。 I want to write this function() inside <span class="price"></span>
. 我想在<span class="price"></span>
编写此function()。 I tried document.write()
but it replaces entire html page. 我尝试了document.write()
但它替换了整个html页面。 How to write document.getElementsByClassName('price')[].innerHTML = numDifferentiation('<?php echo $row['msp']; ?>');
如何编写document.getElementsByClassName('price')[].innerHTML = numDifferentiation('<?php echo $row['msp']; ?>');
inside while loop of php. 里面的PHP循环。
I tried: 我试过了:
<?php
for($=0;$i<10;$i++){
?>
<script>
document.getElementsByClassName('price')[<?php echo $i ?>].innerHTML = numDifferentiation('<?php echo $row['msp']; ?>');
</script>
<?php
}
?>
My entire code javascript function, form submit on keyup via ajax. 我的整个代码javascript函数,都通过ajax在keyup上提交表单。 Ajax code and PHP. Ajax代码和PHP。
Javascript 使用Javascript
function numDifferentiation(val) {
if(val >= 10000000) val = (val/10000000).toFixed(2) + ' Cr';
else if(val >= 100000) val = (val/100000).toFixed(2) + ' Lac';
else if(val >= 1000) val = (val/1000).toFixed(2) + ' K';
return val;
}
Form Submit via Ajax 通过Ajax提交表单
$( document ).ready( function () {
$( ".searchTerm" ).keyup( function () {
var text = $( this ).val();
$.ajax( {
type: "POST",
url: "read-project.php",
data: 'text=' + text,
dataType: "html",
async: false,
success: function ( data ) {
if(text == ""){
$( '.search_box' ).hide();
$( '#project-list-all' ).show();
$( '.search_box' ).html("");
}
else if(text.length >= 2){
$( '.search_box' ).show();
$( '.search_box' ).html( data );
$("#project-list-all:empty").parent().hide();
$( '#project-list-all' ).hide();
}
},
error: function ( errorThrown ) {
alert( errorThrown );
alert( "There is an error with AJAX!" );
}
} );
} );
} );
PHP PHP
<?php
require_once('config.php');
//require_once('config.php');
$text = $_POST['text'];
$result = $conn->query("select * from project where name LIKE '%$text%' or type LIKE '%$text%' or sector LIKE '%$text%' or city LIKE '%$text%' or builder LIKE '%$text%' LIMIT 6");
if($result){
echo '<ul>';
if(mysqli_num_rows($result) > 0) {
while ($row = $result->fetch_assoc())
{
echo "<li>";
?>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="flat-item" style="box-shadow: 2px 2px 9px #000; padding: 5px;">
<div class="flat-item-image">
<a href="project-details.php?id=<?php echo $row['id'] ?>"><img src="images/small_images/<?php echo $row['small_img']; ?>" alt=""></a>
<div class="flat-link">
<a href="project-details.php?id=<?php echo $row['id'] ?>">More Details</a>
</div>
<ul class="flat-desc">
<li>
<h5 class="clr-white project-heading"><a href="project-details.php?id=<?php echo $row['id'] ?>"><?php echo $row['name'];?> </a></h5>
<P class="uderline"></P>
<p class="property-type"><?php echo $row['type'];?></p>
</li>
</ul>
</div>
<div class="flat-item-info">
<div class="flat-title-price">
<p class="pull-left"><img src="images/icons/location.png" alt=""><?php echo $row['sector'];?>,<?php echo $row['city'];?></p>
<span class="price" id="price"><script>
document.getElementsByClassName('price')[].innerHTML = numDifferentiation('<?php echo $row['msp']; ?>');
</script></span>
</div>
</div>
</div>
<?php
echo '<li>';
}
echo '</ul>';
}
else {
echo '<h2 style="color: red;">No Result Found: '.$text.'</h2>';
}
}
?>
Scripts shouldn't be put inside of HTML content like that - ideally, put them in separate .js
files. 不应将脚本放在这样的HTML内容中-理想情况下,请将它们放在单独的.js
文件中。
Note that it's invalid HTML to have multiple elements with the same ID in the same document: remove id="price"
. 请注意,在同一文档中包含多个具有相同ID的元素是无效的HTML:remove id="price"
。
Give the .price
s data- attributes with PHP, and then have Javascript loop over the .price
s to run numDifferentiation. 使用PHP赋予.price
的data-属性,然后对.price
进行Javascript循环以运行numDifferentiation。 For example: 例如:
<span class="price" data-msp="<?php echo $row['msp']; ?>">
and then, in your Javascript (somewhere else, written only once): 然后,在您的Javascript中(在其他地方,只编写一次):
document.querySelectorAll('.price').forEach((priceSpan) => {
priceSpan.textContent = numDifferentiation(priceSpan.getAttribute('data-msp'));
});
to run on page load. 在页面加载时运行。
You should probably make your numDifferentiation better too: 您可能还应该使numDifferentiation更好:
function numDifferentiation(val) {
if(val >= 10000000) return (val/10000000).toFixed(2) + ' Cr';
else if(val >= 100000) return (val/100000).toFixed(2) + ' Lac';
else if(val >= 1000) return (val/1000).toFixed(2) + ' K';
return val;
}
(you don't want to reassign the parameter, you just want to return
when the desired condition is found) (您不想重新分配参数,只想在找到所需条件时return
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.