jQuery 在 JSP 页面中显示/隐藏 div

Question

我的 jQuery 有一个小问题，我无法完全弄清楚我的问题出在哪里，所以如果有人能帮我解决这个问题，我们将不胜感激。

我正在使用一个 jQuery 函数，当我的 #add div 被点击时，一个 JavaBean 被调用，它将当前页面添加到会话 user 并且当#remove div 被点击时，一个执行类似的过程，从用户中删除当前页面。

当我尝试使用集合检查当前页面是否已与用户关联时，我的问题就开始了，如果是，则显示#remove div，否则显示#add div。

下面是我的脚本：

<script>
    $(document).ready(function() {
        $("#viewshow-text").load(function(){
            if(${userShowDetails}) { <%-- this var can either be true or false depending on whether the page is associated with the user or not --%>
                $('#removeshow').show(),
                $('#addshow').hide();
            } else {
                $('#addshow').show(),
                $('#removeshow').hide();
            }
        });
        $("#add").click(function() {
            $.post("addshow", {
                item : "${param.show}"
            }, function(data, status) {

            }, function() {
                <%-- hide a div and display the other --%>
                $this.find('#addshow').hide(),
                $this.find('#removeshow').show();
            });

        });
        $("#remove").click(function() {
            $.post("removeshow", {
                item : "${param.show}"
            }, function(data, status) {

            }, function() {
                $this.find('#removeshow').hide(),
                $this.find('#addshow').show();
            });
        });
    });
</script>

我有问题的 div 元素如下：

<div class="viewshow-text">
  <c:if test="${!empty USER}"> <%-- only display if a user is logged in --%>
    <div id="addshow" class="viewshow-button viewshowAdd-button">
      <a id="add" href="#">Add to calendar</a>
    </div>
    <div id="removeshow" class="viewshow-button viewshowRemove-button">
      <a id="remove" href="#">Remove from calendar</a>
    </div>
  </c:if>
</div>

我的 JavaBean 属性没有问题，因为我仔细检查了它们，它们正在显示预期的内容：

$(document).ready(function() {
        $(if(false) {
            $('#removeshow').show(),
            $('#addshow').hide();
        } else {
            $('#addshow').show(),
            $('#removeshow').hide();
        });

当页面不在用户列表中时。

Answer 1

来试试这个，

<script>
     $(document).ready(function() {
      if(${userShowDetails}) {
        $('#removeshow').show(),
        $('#addshow').hide();
       } else {
        $('#addshow').show(),
        $('#removeshow').hide();

      };
      $("#add").click(function() {
       $.post("addshow", {
        item : "${param.show}"
       }).done(function(data) {
        $('#addshow').hide(),
        $('#removeshow').show();
       });
      });
      $("#remove").click(function() {
       $.post("removeshow", {
        item : "${param.show}"
       }).done(function(data) {
        $('#removeshow').hide(),
        $('#addshow').show();
       });
      });
     });
    </script>