【发布时间】：2018-06-02 03:14:36
【问题描述】：
我有一个fiddle，我通过查看下面的屏幕截图复制了它：
屏幕截图和小提琴的工作方式是，如果我点击上述任何项目，则会发生以下变化：
- 背景颜色变为绿色。
- 图标和文本变为白色。
为了实现这一点，我使用的示例 JQuery 代码是：
$("#franchisehub").click(function() {
if ($('.franchisehubtv').css('display') == "flex") {
$('.arrow-down').css('display', 'none');
$('.franchisehubtv').css('display', 'none');
$('#franchisehub img.black').css('display', 'none');
} else {
resetAll();
$('#franchisehub').css('background-color', 'green');
$('#franchisehub p').css('color', 'white');
$('.franchisehubtv').css('display', 'flex');
$('#franchisehub img.black').css('display', 'none');
$('#franchisehub img.white').css('display', 'inline-block');
}
});
问题陈述：
在小提琴中，当我点击任何项目时，文本 （出现在方形框中） 会出现在框的中心，而 当它没有被点击时出现在方框之外（我不想发生这种情况）。
我想知道我需要在小提琴中进行哪些更改，以便在单击项目和未单击项目时，它应该保持在同一位置。
【问题讨论】：
-
似乎两个图像都在未选择框时显示，这会将文本向下推。你的
resetAll()函数中有什么？另外，我建议使用更通用的选择器，这样您就不需要重复自己了。见DRY @ jQuery.com。 -
@showdev 为了使我的代码模块化，我使用了 resetAll() 函数，这样我就不必编写代码行了。是的，显示两个图像，当它被点击的白色被显示时，当它未被点击的黑色被显示时。
-
我的意思是当没有选择一个框时，两个图像都会显示。我假设您想在两个图像之间切换。
-
@showdev 是对的。您应该隐藏第二张图片，然后在单击时显示它。
-
@DaleNguyen 有什么办法，我们可以用当前的代码吗？
标签： javascript jquery html css