Question

我已经建立了一个反馈功能，可以在我们公司网站的页面底部使用。访问者可以在问题上投票赞成或否，＆＃34;这些信息对您有用吗？＆＃34;点击通过Javascript显示div（feedbackDiv1 / feedbackDiv2）。

该功能有效，但我希望问题和答案按钮在访问者投票后消失，即。隐藏div #pagefeedback。

我已经尝试了所有工具，但我无法让它发挥作用。

非常感谢帮助！

这是使用的JavaScript：

function showFeedback1() {
   document.getElementById('feedbackDiv1').style.display = "block";

function showFeedback2() {
   document.getElementById('feedbackDiv2').style.display = "block";}

这是使用的HTML：

<div class="greycontentbox">

<div id="pagefeedback">
<h4 style="text-align: center;">Was this information useful to you?</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
  <tbody>
    <tr>
      <td align="center"><a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback1()"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES</a></td>
      <td align="center"><a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback2()"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO</a></td>
    </tr>
  </tbody>
</table></div>


<div align="center"><div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">POSITIVE FEEDBACK</div></div>
<div align="center"><div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">NEGATIVE FEEDBACK</div></div>
</div>

亲切的问候，皮特

Answer 1

如果你给你的表一个ID，那么将它的display css更改为none是相当容易的。您也可以使用1函数完成相同的操作，只需将参数传递给它，您就可以在条件语句中使用它来显示适当的反馈。

function showFeedback(feedback) {
   if (feedback == 'yes') {
     document.getElementById('feedbackDiv1').style.display = "block";
   } else {
     document.getElementById('feedbackDiv2').style.display = "block";
   }
   document.getElementById('options').style.display = "none";
}

<div class="greycontentbox">
  <div id="pagefeedback">
    <h4 style="text-align: center;">
      Was this information useful to you?
    </h4>
    <table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
      <tbody id="options">
        <tr>
          <td align="center">
            <a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback('yes')">
              <i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES
            </a>
            </td>
            <td align="center">
            <a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback('no')">
              <i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO
            </a>
            </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div align="center">
    <div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">
      POSITIVE FEEDBACK
    </div>
  </div>
  <div align="center">
    <div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">
      NEGATIVE FEEDBACK
    </div>
  </div>
</div>

Answer 2

根据罗伯特的回答，你可以做一个简单的函数，它接收必须显示的元素的ID。

function showFeedback(feedback) {
   document.getElementById(feedback).style.display = "block";
   document.getElementById('options').style.display = "none";
}

<div class="greycontentbox">

<div id="pagefeedback">
<h4 style="text-align: center;">Was this information useful to you?</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
  <tbody id="options">
    <tr>
      <td align="center"><a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback('feedbackDiv1')"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES</a></td>
      <td align="center"><a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback('feedbackDiv2')"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO</a></td>
    </tr>
  </tbody>
</table></div>


<div align="center">
<div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">POSITIVE FEEDBACK</div></div>
<div align="center"><div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">NEGATIVE FEEDBACK</div>
</div>
</div>

使用Javascript点击隐藏div（已经显示其他div的点击）

2 个答案: