Question

当按钮上的“用户”单击时，我有一个功能，但是每个按钮都显示不同的图像。所以我要寻找的是当用户单击另一个按钮时，上一个按钮的图像被隐藏了

我还需要一些建议或指南来执行双击功能，保留ID并以文本形式显示

我正在使用javascript，但我也相信有一种使用jquery的方法

对不起，我的英语水平不是最好，尽管我认为我能理解。

function showimage(id) {
  var element = document.getElementById(id);

  if (element.classList) {
    element.classList.toggle(id);
  } else {
    var classes = element.className.split(" ");
    var i = classes.indexOf(id);

    if (i >= 0)
      classes.splice(i, 1);
    else
      classes.push(id);
    element.className = classes.join(" ");
  }
}

html {
  overflow: ;
}

.background {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: 100%;
  height: 100%
}

@font-face {
  font-family: 'avenir';
  src: url(../fonts/Avenir Next Heavy.otf)
}

@font-face {
  font-family: 'Avenir Next LT Pro Heavy Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/AvenirNextLTPro-HeavyCnIt.woff) format('woff');
}

.general {
  background-image: url(../img/miSlJSc.png);
  position: absolute;
  top: 0%;
  left: -1%;
  width: 1584px;
  height: 900px;
}

.contain1 {
  background: rgba(0, 0, 0, 0.0);
  position: absolute;
  left: 100px;
  top: 258px;
  width: 1048px;
  height: 254px
}

.contain2 {
  background: rgba(0, 0, 0, 0.0);
  position: absolute;
  left: 100px;
  top: 526px;
  width: 1048px;
  height: 254px;
}

button {
  background: #005F38;
  background: rgba(0, 95, 56, 1);
  border-style: Solid;
  border-color: #112302;
  border-color: rgba(17, 35, 2, 1);
  border-width: 1px;
  position: absolute;
  left: 439px;
  top: 822px;
  width: 359px;
  height: 60px;
  border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px
}

#comprar {
  left: 1185px
}

.styletext {
  font-family: Avenir Next LT Pro Heavy Condensed Italic;
  font-size: 40px;
  color: #FCFCFC;
  color: rgb(252, 252, 252);
}

.boxsmall {
  background: #000000;
  background: rgba(0, 0, 0, 0.3);
  position: relative;
  top: -14px;
  left: 0px;
  width: 117px;
  height: 120px;
  margin-left: 10px;
  margin-top: 14px;
  border-width: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px
}

.boxbig {
  background: rgba(0, 0, 0, 0.3);
  position: relative;
  left: 0%;
  top: -5%;
  width: 249px;
  height: 120px;
  margin-left: 10px;
  margin-top: 14px;
  border-width: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px
}

.boxsellect {
  background: #000000;
  background: rgba(0, 0, 0, 1);
  opacity: 0.65;
  position: absolute;
  left: 898px;
  top: 526px;
  width: 249px;
  height: 120px
}

.icon * {
  position: relative;
  top: 0px;
  left: -15px;
  width: 135px;
  height: 33px;
  transform: rotate(315deg)
}

#botella .icon * {
  width: 130px;
  height: 35px
}

#punoAmericano .icon * {
  width: 70px;
  height: 35px;
  left: 0px
}

.icon-p * {
  left: -10px;
  width: 92px;
  height: 72px;
}

#pistol_mk2 .icon-p {
  transform: scale(1.0, 1.0);
  left: -20px;
}

.statsPistol {
  width: 100%;
  padding: 70px 105px;
  background-image: url(https://image.flaticon.com/icons/svg/53/53524.svg);
  position: absolute;
  top: -270px;
  left: 1090px
}

.statsPistolmk2 {
  width: 100%;
  padding: 70px 105px;
  background-image: url(https://image.flaticon.com/icons/svg/1034/1034131.svg);
  position: absolute;
  top: -270px;
  left: 1090px
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
  <script src="js/script.js" type="text/javascript"></script>
  <link rel="stylesheet" href="style/styles.css" type="text/css">
  <style>
    /*.general {display: none;}*/
  </style>
</head>

<body>
  <div class="full-screen">
    <div class="general">
                <div class="contain2">

        <button class="boxsmall" id="pistol" onclick="showimage('statsPistol')">
					<div class="icon-p">
						<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
					</div>
					<div id="statsPistol">
					</div>
				</button>

        <button class="boxsmall" id="pistol_mk2" onclick="showimage('statsPistolmk2')">
					<div class="icon-p">
						<img src="img/pistolas/Pistol-mk2-icon.png">
					</div>
					<div id="statsPistolmk2">
					</div>
				</button>


      </div>
      <button class="styletext" id="comprar">Comprar</button>
      <button class="styletext" id="salir">Salir</button>
    </div>
  </div>
</body>

</html>

Answer 1

使用jQuery并不难。只需隐藏所有图像（包括未显示的图像），然后显示已单击的图像即可。您不必担心仅隐藏前一张图像，因为如果您这样做，您将没有足够的按钮来改善可感知的性能。

代码的工作方式如下：

当您单击类为boxsmall的元素时：
隐藏类boxsmall中任何元素内的所有图像。
显示已单击元素内的图像。

其他一些建议：

没有任何具有相同ID的HTML元素。如果您不需要ID，只需将其省略。
不要像某些背景和颜色属性那样设置重复的CSS属性。两者中的较低者将覆盖较高者，因此没有意义。

$(document).ready(function($) {
  $('.boxsmall').on('click', function(e) {
    $('.boxsmall img').hide();
    $(this).find('img').show();
  });
});

.boxsmall {
  width: 122px;
  height: 122px;
  border-radius: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="full-screen">
    <div class="general">
      <div class="contain1">

        <button class="boxsmall">
                <div class="icon">
                    <img src="https://image.flaticon.com/icons/svg/42/42829.svg">
                </div>
            </button>
        <button class="boxsmall">
                <div class="icon">
                    <img src="https://image.flaticon.com/icons/svg/42/42829.svg">
                </div>
            </button>
        <button class="boxsmall">
                <div class="icon">
                    <img src="https://image.flaticon.com/icons/svg/42/42829.svg">
                </div>
            </button>
        <button class="boxsmall">
                <div class="icon">
                    <img src="https://image.flaticon.com/icons/svg/42/42829.svg">
                </div>
            </button>
      </div>

    </div>
  </div>
</body>

根据按钮1显示图像

1 个答案: