javascript - 如何确保点击事件只对预期的类产生影响？

Question

这是执行代码的重要部分。

我试图单击一个具有与为消息添加书签相关的特定 ID 的元素，但该元素不断触发另一个单击事件，该事件隐藏了类为“messageCase”的每个 div，同时将类 messageOpen2 附加到书签图像很奇怪的ID

“隐藏”类只是隐藏了包含的所有其他消息实例 messageCase 类。

var openMessageAnimationStrategy = function () {
    var openMessage = $(document).ready(function () {
        var divTarget = $("div.messageCase");

        $(divTarget).click(function (e) {
            var target = $(e.target);
            target.toggleClass('messageOpen2');
            divTarget.addClass('hidden');
            target.removeClass('hidden');
        });
    });
};

这是 HTML 的样子

<div class="messageCase">
    <div class="messageImageBox">
        <div id="messageImage">
        </div>
    </div>
    <div id="subjectLine">
        Subject Line Text
    </div>
    <div id="bookMarkImage">
        <img id="bookmarkStatus" class="savedMessage" src="notbookMarked64.png" />
    </div>
    <div class="activeBookmarks">
        {38} <br />
        Bookmarks <br />
        <br />
        9:53am
    </div>
    <div id="bodyPreview">
        Body Preview Text is light
    </div>
</div>

每次我在 bookmarkStatus 上使用 Click 事件来更改图像的 src 时，它都会导致执行第一个 click 事件，使所有内容消失，并将类 messageOpen2 添加到 bookmarkStatus。如有必要，我可以包含 CSS，但我会在下面列出书签功能的代码

var bookmarkedStrategy = function () {
    var bookmarkedStrategy = $(document).ready(function () {
        var bookmarkStatus = $("#bookmarkStatus");
        var divTarget = $('messageCase');
      //below trying to remove the Class that was attached by the initial function while also changing the image SRC for the class bookmark
        $(divTarget).click(function (e) {
            var target = $(e.target);
            divTarget.removeClass('messageCase2');
            bookmarkStatus.toggleClass('savedMessage');
        });
    });
};

我认为主要问题与初始功能有关，但我不知道还有什么其他问题，有什么想法吗？

edit 这是重要的 CSS。

  .savedMessage {
         background-image: url("bookmarked64.png");
     }
    .messageOpen2 {
       height: 250px;

        }
    .messageCase {
        margin: 5px;
        border-radius: 5px;
        background-color: aliceblue;
        height: 70px;
    } 
  #bookMarkImage {
        float:right;
        height:64px;
        width:64px;
        z-index:9999;
    }
  .hidden {
        display:none;
        max-height: inherit;



       }
 .activeBookmarks {
            float: right;
            text-align: center;
            font-size: 13px;

            font-weight: 700;
            text-decoration: solid;

        }

调用代码

var bookmarkedthings = new MessageHandling(bookmarkedStrategy);
bookmarkedthings.greet();
var openMessage = new MessageHandling(openMessageAnimationStrategy);
openMessage.greet();

Answer 1

少了一个。在您的 bookmarkedStrategy 函数代码中 var divTarget = $('.messageCase'); 添加点并重试