發布系統中的Javascript問題-有解無憂

所以，我有一個發布系統。當您在輸入欄位中鍵入帖子并單擊提交按鈕時，該帖子將在 PHP 和 AJAX 的幫助下顯示。

現在在那個帖子上是喜歡按鈕和評論按鈕之類的東西，當你點擊喜歡按鈕時，它會變成藍色。現在，在發完帖子并顯示帖子后，單擊“贊”按鈕將使其變為藍色。但是，假設您再發一個帖子。對于該帖子，一切正常，除了當您單擊第二個或第三個帖子上的“贊”按鈕時，它會使第一個帖子上的“贊”按鈕僅變為藍色，與評論按鈕類似。此外，第一個帖子的背景顏色為銀色 (#C0C0C0)，但是任何其他帖子，如第二個或第三個帖子，都沒有。它們沒有背景顏色。

這些東西（點擊時變成藍色）是使用 JavaScript 完成的。我從中確定的是，除了第一篇文章之外，JS 不適用于任何其他文章。為了解決這個問題，我嘗試更改代碼中 JS 的位置，因為我認為它與范圍有關，但事實并非如此。請幫助解決 JS 和背景顏色問題。

PHP/HTML/CSS 代碼：

<style>
.textPost {
  margin-top: 170px;
  width: 650px;
  height: 400px;
  position: fixed;
  background-color: #C0C0C0;
  margin-left: 685px;
  border-radius: 15px;
}

.textpostFormat {
  margin-left: -640px;
  position: fixed;
}
</style>

<div class="textPost">
  <?php

  $sql = "SELECT * FROM posts";
  $result = mysqli_query($connection, $sql);
  if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_assoc($result)) {

  ?>
  <div class="textpostFormat" id="textpostFormat">
          <img src="img/pfp.png" alt="pfp" onclick="location.href='profile.php'" class="textpostPFP">
    <b><div class="textinfo"><?php echo $firstname . "&nbsp;" . $lastname ?></div></b>
    <img src="img/options.png" alt="textpostOptions" class="textpostOptions">
    <hr style="margin-top: 85px; width: 600px; position: fixed; margin-left: 663px; border:1px solid black; border-radius: 10px">
    <hr style="margin-top: 200px; width: 600px; position: fixed; margin-left: 663px; border:1px solid black; border-radius: 10px">
    <div class="textfeedbackBar" style="position: fixed">
      <hr style="margin-top: 250px; width: 600px; position: fixed; margin-left: 663px; border: 1px solid black; border-radius: 10px">
      <div class="textratingBar">
        <div style="float: left; margin: 10px; cursor: pointer">1</div>
        <hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
        <div style="float: left; margin: 10px; cursor: pointer">2</div>
        <hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
        <div style="float: left; margin: 10px; cursor: pointer">3</div>
        <hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
        <div style="float: left; margin: 10px; cursor: pointer">4</div>
        <hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
        <div style="float: left; margin: 10px; cursor: pointer">5</div>
        <hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
        <div style="float: left; margin: 10px; cursor: pointer">6</div>
        <hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
        <div style="float: left; margin: 10px; cursor: pointer">7</div>
        <hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
        <div style="float: left; margin: 10px; cursor: pointer">8</div>
        <hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
        <div style="float: left; margin: 10px; cursor: pointer">9</div>
        <hr style="width: 0px; height: 43px; float: left; margin-top: -2px; border: 1px solid black">
        <div style="float: left; margin-left: 275px; cursor: pointer; margin-top: 10px; position: fixed">10</div>
      </div>
    </div>
    <hr style="margin-top: 320px; width: 600px; position: fixed; margin-left: 663px; border: 1px solid black; border-radius: 10px">
    <img src="img/pfp.png" alt="commentpfp" onclick="location.href='profile.php'" class="textcommentPFP">
    <input type="text" name="textComment" class="textComment" id="textComment" placeholder="Write a comment">
    <p style="margin-left: 670px; margin-top: 95px; position: fixed; font-size: 45px; font-family: 'Rajdhani'"><?php echo $row["body"]; ?></p>
    <div class="textPostData" style="position:fixed; font-family: 'Rajdhani'; margin-left: 820px; margin-top: 150px">
      <h4 id="textDataLikes" style="cursor: pointer">0 Likes</h4>
      <h4 id="textDataComments" style="margin-left: 102px; margin-top: -42px; cursor: pointer">0 Comments</h4>
      <h4 id="textDataReactions" style="margin-left: 240px; margin-top: -42px; cursor: pointer">0 Reactions</h4>
    </div>
    <div style="margin-left: 715px; position: fixed; font-family: 'Rajdhani'">
      <h2 style="margin-top: 206px; margin-left: -30px; cursor:pointer; padding: 5px; position: fixed" class="textLike" id="textLike" onclick="textLikeClick()"><i class="fa fa-thumbs-up"></i> Like</h2>
      <h2 style="margin-left: 99px; margin-top: 206px; cursor:pointer; padding: 5px; position: fixed" class="makeComment" id="makeComment" onclick="textCommentClick()"><i class="fa fa-comment" style="margin-top: 2px;"></i> Comment</h2>
      <h2 style="margin-left: 290px; margin-top: 206px; cursor:pointer; padding: 5px; position: fixed" class="textReact" id="textReact"><i class="fa fa-smile" style="margin-top: 2px;"></i> React</h2>
      <h2 style="margin-left: 432px; margin-top: 206px; cursor:pointer; padding: 5px; position: fixed" class="textShare" id="textShare"><i class="fa fa-share" style="margin-top: 2px"></i> Share</h2>
    </div>
  </div>
  <div style="margin-left: 398px; margin-top: 236px">
    <img class="textupvote" id="textUpvoteImg" src="img/upvote.png" alt="upvote" onclick="changetextUpvote()" style="width: 100px; margin-bottom: 28px; cursor: pointer">
    <img class="textdownvote" id="textDownvoteImg" src="img/downvote.png" alt="downvote" onclick="changetextDownvote()" style="width: 55px; margin-top: 32px; margin-left: 21px; position: fixed; cursor: pointer">
  </div>
  <?php

  }
}

  ?>
  </div>
  <?php

  }
}

  ?>
</div>

AJAX 代碼（顯示帖子而不重繪頁面）：

function makePost() {
  var postContent = $("#postContent").val();
  if (postContent.length > 0) {
    jQuery.ajax({
      url:"yourposts.php",
      data:{
        postContent: postContent
      },
      type:"POST",
      success:function(data){
        if (data == "success") {
          $("#textpostFormat").html(postContent);
        }
      }
    });
  }
}

Javascript代碼（用于像按鈕藍色之類的東西）：

<script type="text/javascript">

function changetextUpvote() {
  var textUpvoteImg = document.getElementById('textUpvoteImg');
  if (textUpvoteImg.src.match("orangeupvote")) {
    textUpvoteImg.src = "img/upvote.png";
  } else {
    textUpvoteImg.src = "img/orangeupvote.png";
    textDownvoteImg.src = "img/downvote.png";
  }
}

function changetextDownvote() {
  var textDownvoteImg = document.getElementById('textDownvoteImg');
  if (textDownvoteImg.src.match("orangedownvote")) {
    textDownvoteImg.src = "img/downvote.png";
  } else {
    textDownvoteImg.src = "img/orangedownvote.png";
    textUpvoteImg.src = "img/upvote.png";
  }
}

function textLikeClick() {
  document.getElementById('textLike').style.color = "blue";
}

function textCommentClick() {
  document.getElementById('textComment').focus();
}

</script>

uj5u.com熱心網友回復：

這里的所有元素都沒有 ID 屬性。元素的識別是基于檢查 event.target 并使用 DOM 導航querySelector，parentNode也許還有其他技術，例如nextElementSiblingetc

這些按鈕都注冊了一個事件偵聽器，該事件data-set偵聽器基于屬性分叉邏輯。

document.querySelectorAll('[type="button"]').forEach(bttn=>bttn.addEventListener('click',function(e){
  
  let img=this.parentNode.querySelector('img');
  let text=this.parentNode.querySelector('textarea');
  
  switch(this.dataset.action){
    case 'upvote':
      img.src='img/orangeupvote.png';
      img.classList.toggle(this.dataset.action)
    break;
    case 'downvote':
      img.src='img/orangedownvote.png';
      img.classList.toggle(this.dataset.action)
    break;
    case 'comment':
      text.focus();
      
      let fd=new FormData();
          fd.set('comment',text.value);
          
      fetch('yourposts.php',{method:'post',body:fd})
          .then(r=>r.text())
          .then(text=>{alert(text)})
    break;
    case 'like':
      this.classList.toggle('liked')
    break;
  }
}));

.liked{background:blue;color:white}
textarea:focus{background:pink}
.upvote{outline:2px solid green}
.downvote{outline:2px solid red}

<div class="textPost">
  <!--
  <?php

    $sql = "SELECT * FROM posts";
    $result = mysqli_query($connection, $sql);
    if (mysqli_num_rows($result) > 0) {
      while ($row = mysqli_fetch_assoc($result)) {

  ?>
 -->
  <h1>Example data</h1>
  <div class="textpostFormat">
    <p>Lorem ipsum dolor solit...etc #1</p>
    <img />
    <input type='button' class='usr-interaction' data-action='upvote' value='Upvote' />
    <input type='button' class='usr-interaction' data-action='downvote' value='Downvote' />
    <textarea cols=50 rows=5>This is simply a comment...</textarea>
    <input type='button' class='usr-interaction' data-action='comment' value='Comment' />
    <input type='button' class='usr-interaction' data-action='like' value='Like' />
  </div>

  <div class="textpostFormat">
    <p>Lorem ipsum dolor solit...etc #2</p>
    <img />
    <input type='button' class='usr-interaction' data-action='upvote' value='Upvote' />
    <input type='button' class='usr-interaction' data-action='downvote' value='Downvote' />
    <textarea cols=50 rows=5>Also a simple comment...</textarea>
    <input type='button' class='usr-interaction' data-action='comment' value='Comment' />
    <input type='button' class='usr-interaction' data-action='like' value='Like' />
  </div>
  
  <div class="textpostFormat">
    <p>Lorem ipsum dolor solit...etc #3</p>
    <img />
    <input type='button' class='usr-interaction' data-action='upvote' value='Upvote' />
    <input type='button' class='usr-interaction' data-action='downvote' value='Downvote' />
    <textarea cols=50 rows=5>Guess what this is...</textarea>
    <input type='button' class='usr-interaction' data-action='comment' value='Comment' />
    <input type='button' class='usr-interaction' data-action='like' value='Like' />
  </div>





</div>

uj5u.com熱心網友回復：

剝離所有可怕的行內樣式并用簡單的 data-id 屬性替換 ID 屬性，以生成一些示例渲染標記，如下所示。這并不打算成為您的最終解決方案 - 您需要了解如何將您的功能融入其中，因為坦率地說，給出的代碼是混亂的。

如果您將提供event給您可以event.target在函式內訪問的函式的引數，則在單擊處理程式函式中。這event.target指向啟動點擊的元素。從那時起，您可以使用 DOM 導航技術來查找其他感興趣的節點。

document.querySelectorAll('.textpostFormat *[data-id]').forEach(n=>n.addEventListener('click',function(e){
  switch( this.dataset.id ){
    case 'textUpvoteImg':
      changetextUpvote(e);
    break;
    case 'textDownvoteImg':
      changetextDownvote(e)
    break;
    case 'makeComment':
      textCommentClick(e);
    break;
    case 'textLike':
      textLikeClick(e);
    break;
  }
}));



function changetextUpvote(e) {
    alert(e.target)
}

function changetextDownvote(e) {
  alert(e.target)
}

function textLikeClick(e) {
  alert(e.target)
}

function textCommentClick(e) {
  alert(e.target)
}

<div class='textpostFormat'>
    <a href='profile.php'><img src='img/pfp.png' alt='pfp' class='textpostPFP'></a>
    <div class='textinfo'><b>FIRSTNAME LASTNAME #1</b></div>
    <img src='img/options.png' class='textpostOptions' />

    <div class='textfeedbackBar'>
        <div class='textratingBar'>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
        </div>
    </div>

    <a href='profile.php'><img src='img/pfp.png' alt='commentpfp' class='textcommentPFP' /></a>
    <input type='text' name='textComment' class='textComment' data-id='textComment' placeholder='Write a comment' />

    <p>PARAGRAPH - BODY CONTENT #1</p>
    <div class='textPostData'>
        <h4 data-id='textDataLikes'>0 Likes</h4>
        <h4 data-id='textDataComments'>0 Comments</h4>
        <h4 data-id='textDataReactions'>0 Reactions</h4>
    </div>
    <div>
        <h2 class='textLike' data-id='textLike'><i class='fa fa-thumbs-up'></i> Like</h2>
        <h2 class='makeComment' data-id='makeComment'><i class='fa fa-comment' style='margin-top: 2px;'></i> Comment</h2>
        <h2 class='textReact' data-id='textReact'><i class='fa fa-smile' style='margin-top: 2px;'></i> React</h2>
        <h2 class='textShare' data-id='textShare'><i class='fa fa-share' style='margin-top: 2px'></i> Share</h2>
    </div>
    <div>
        <img class='textupvote' data-id='textUpvoteImg' src='img/upvote.png' alt='upvote' />
        <img class='textdownvote' data-id='textDownvoteImg' src='img/downvote.png' alt='downvote' />
    </div>
</div>


<div class='textpostFormat'>
    <a href='profile.php'><img src='img/pfp.png' alt='pfp' class='textpostPFP'></a>
    <div class='textinfo'><b>FIRSTNAME LASTNAME #2</b></div>
    <img src='img/options.png' class='textpostOptions' />

    <div class='textfeedbackBar'>
        <div class='textratingBar'>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
        </div>
    </div>

    <a href='profile.php'><img src='img/pfp.png' alt='commentpfp' class='textcommentPFP' /></a>
    <input type='text' name='textComment' class='textComment' data-id='textComment' placeholder='Write a comment' />

    <p>PARAGRAPH - BODY CONTENT #2</p>
    <div class='textPostData'>
        <h4 data-id='textDataLikes'>0 Likes</h4>
        <h4 data-id='textDataComments'>0 Comments</h4>
        <h4 data-id='textDataReactions'>0 Reactions</h4>
    </div>
    <div>
        <h2 class='textLike' data-id='textLike'><i class='fa fa-thumbs-up'></i> Like</h2>
        <h2 class='makeComment' data-id='makeComment'><i class='fa fa-comment' style='margin-top: 2px;'></i> Comment</h2>
        <h2 class='textReact' data-id='textReact'><i class='fa fa-smile' style='margin-top: 2px;'></i> React</h2>
        <h2 class='textShare' data-id='textShare'><i class='fa fa-share' style='margin-top: 2px'></i> Share</h2>
    </div>
    <div>
        <img class='textupvote' data-id='textUpvoteImg' src='img/upvote.png' alt='upvote' />
        <img class='textdownvote' data-id='textDownvoteImg' src='img/downvote.png' alt='downvote' />
    </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/407969.html

標籤：

上一篇：如何在單擊按鈕時將選擇邊框顏色更改為紅色

下一篇：引導彈出視窗需要雙擊才能被觸發