javascript - 使用 Ajax 更改 div 的颜色

Question

如何在 ajax 中更改 div 的颜色？div 称为 rowMain ，但我有几个与列表记录相同的 div。

<script>
    $(document).ready(function() {
        $("#submit-productdescription").submit(function() {
                 var row = $(this).parent('.rowMain');
                 $.ajax({
                     type: $(this).attr('method'),
                     url: 'EbayBuy-ReceivedUpdate.php',
                     data: $(this).serialize(),
                     success: function (data) {                         

                         row.css("background-color", "#787878");

               }, error: function(jqXHR, textStatus, errorThrown){
              console.log(" The following error occured: "+ textStatus, errorThrown );
            } });
           return false;
        });
    });
</script>

这不会更新行，我还尝试了 rowMain 中 div 的各种选项，但仍然无法更改它们。

任何帮助，将不胜感激。

	<script>
		$(document).ready(function() {
			$("#submit-productdescription").submit(function() {
					 var row = $(this).parent('.rowMain');
					 $.ajax({
						 type: $(this).attr('method'),
						 url: 'Update.php',
						 data: $(this).serialize(),
						 success: function (data) {
							 
							 row.css("background-color", "#787878");
							 
				   }, error: function(jqXHR, textStatus, errorThrown){
				  console.log(" The following error occured: "+ textStatus, errorThrown );
				} });
			   return false;
			});
		});
	</script>

.rowMain  { display: block;width:95%;float:left;min-width:750px;background:red; height:auto;padding:10px;  border-radius: 3px;border: 1px solid #000000	position: relative;margin-left:2.5%; margin-top:0px;margin-bottom:2px; 	}

<div id="main" class="rowMain">

<form id="submit-productdescription" method="post" autocomplete="off" class="received">
					<input type="hidden" value="<?php echo $row['Id']?>" name="id"> 
					<input type="submit" name="submit-productdescription" value="Received <?php echo $row['Id']; ?>-<?php echo $row['Status']; ?>" class="btn" /></form>
          
</div>

标签： javascriptphphtml

Answer 1

这就是你要找的吗？

$(document).ready(function() {
  $("form").submit(function(evt) {
     evt.preventDefault();
     var row = $(this).parent('.rowMain').get(0);
     $(row).css("background-color", "green");
  });
});

.rowMain {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 10px;
  margin-bottom: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rowMain">
  <form id="submit-productdescription">
    <button type="submit">Submit</button>
  </form>
</div>

<div class="rowMain">
  <form id="submit-productdescription">
    <button type="submit">Submit</button>
  </form>
</div>
<div class="rowMain">
  <form id="submit-productdescription">
    <button type="submit">Submit</button>
  </form>
</div>