在javascript/jquery中，如何将文本和图像与单击图像对齐？

我看到下面的截图，复制了一个：

屏幕截图和小提琴的工作方式是，如果我点击上面的任何一项，就会发生以下变化：

背景色变为绿色

图标和文本变成白色

为了实现这一点，我使用了以下示例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');

  }

});

问题陈述：

在小提琴中，当我点击任何一个项目时，文本（出现在方框中）会朝着框的中心移动，而当它没有被点击时，它会出现在方框之外（我不希望发生这种情况）

---

我想知道我需要在小提琴中做些什么更改，以便在单击项目和不单击项目时，它应该保持在相同的位置

如果您可以共享HTML代码，那就太好了，无论如何，这里是您如何用一种简单的方式实现这一点的

$（.main div”）。在（'click'，function（）上{
$（this.css（'background-color'，'green'）；
$（this.css（'color'，'white'）；
});

一些文本
一些文本
一些文本
未选择框时，两个图像都会显示，这会向下推送文本。

另外，我建议不要使用内联CSS样式，而是使用更通用的选择器来保持它

下面是一个例子：


jQuery（'.product'）。在（'click'，function（）上）{
jQuery（this）.toggleClass（'selected'）；
});
。产品所有内容{
背景色：#f0；
}
.产品内容{
左边距：15%；
右边距：15%；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充：1rem；
}
.产品内容{
宽度：10%；
文本对齐：居中；
高度：150像素；
垫面：1%；
左：1%；
右：1%；
边框样式：实心；
边框宽度：3倍；
边框颜色：rgb（145147150）；
背景色：白色；
边界半径：10px；
字体大小：15px；
字体系列：“Roboto”；
线高：1.2；
颜色：rgb（58,59,60）；
}
.选定的产品{
背景颜色：绿色；
颜色：白色；
}
.产品名称：白色{
显示：无；
}
.产品图片为黑色{
显示：块；
}
.product.selected img.white{
显示：块；
}
.product.selected img.black{
显示：无；
}

特许经营中心

基于云计算和移动

商业分析

技术支持

订单管理

员工管理
白标

品牌控制

潜在客户跟踪与管理；客户关系管理

自定义发票

目标设定

定制工具

版税计算器

电子邮件营销

这是一个很长的答案，所以我把它放在这里

在原始CSS中，您应该首先隐藏第二个图像

.white{
 display: none;
}

然后，在脚本中，单击时可以隐藏.black：

 $("#franchisehub").click(function() {
      if ($('.franchisehubtv').css('display') == "flex") {
        $('.arrow-down').css('display', 'none');
        $('.franchisehubtv').css('display', 'none');
        $('#franchisehub img.white').css('display', 'inline-block');   
        $('#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（）中，还应该有以下内容：

  $('#franchisehub img.black').css('display', 'inline-block');
  $('#franchisehub img.white').css('display', 'none');

但是您的代码有这么多重复，您应该找到减少代码量的方法。这个功能应该缩短很多
 当一个框未被选中时，这两个图像似乎都会显示，这会将文本向下推。
resetAll（）
函数中有什么？此外，我建议使用更通用的选择器，这样您就不必重复自己的操作。请参阅。@showdev为了使我的代码模块化，我使用了resetAll（）函数，这样就不必编写代码行。是的，两个图像被显示，当它被点击时显示白色，当它没有被点击时显示黑色。我的意思是，当一个框没有被选中时，两个图像都显示出来。我假设您想在这两个图像之间切换。@showdev是对的。你应该隐藏第二个图像，然后单击时显示。@DaleNguyen有什么办法，我们可以用当前代码吗？单击后文本似乎再次下降。我不能为你做任何事情，请看第一个框！没关系。你可以将修复程序应用到其他框中，如果可能的话，找到一种使代码干净的方法。没有时间清理jquery和html代码。很快就可以了。你只需要为你的第二个盒子设置原始的CSS，它就会很好#cloudbasedmobile.white{display:inline block；}#cloudbasedmobile.black{display:none；}现在看起来不错。你给了我周末的计划。将尝试使用toggle类来查看如何执行此操作。