Question

我正在努力点击特定的广场并获得一个复选标记以显示在其上方。我希望它有一个切换效果，但我想尝试至少得到显示的复选标记，我真的有一个问题让它甚至出现。

我做错了什么？

＆＃13;

$('.package-img').click(function () {
        //target.innerHTML = '<img src="images/checkmark-circle.png" class="checkmark-img total-center">';
        $('.package-img').prepend('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">')
    });

＆＃13;

.package-img {
    width: 60%;
    height: auto;
    opacity: 1;
    margin-left: 20%;
    cursor: pointer;
    transition:1s; -webkit-transition:1s;
    position: relative;
}
#calendar-wrap, #tp-wrap {
    width: 100%;
    position: relative;
}
.checkmark-img {
    width: 50%;
    height: 50%;
    z-index: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap">
  <h2 class="product-titles">Package 1</h2>
  <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img">
</div>
<div id="calendar-wrap">
  <h2 class="product-titles">Package 2</h2>
  <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img">
</div>

＆＃13;

Answer 1

使用before方法代替prepend，否则您的图片会被添加到另一张图片中。也可以使用$(this).before...，否则您的复选标记将添加到课程package-img

的所有图片中

$(this).before('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">')

var $img = $('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img"/>').hide();
$('.package-img').before($img);

$('.package-img').click(function () {
    $(this).prev().show();
});

$('.checkmark-img').click(function () {
    $(this).hide();
});

.package-img {
    width: 60%;
    height: auto;
    opacity: 1;
    margin-left: 20%;
    cursor: pointer;
    transition:1s; -webkit-transition:1s;
    position: relative;
}
#calendar-wrap, #tp-wrap {
    width: 100%;
    position: relative;
}
.checkmark-img {
    width: 50%;
    height: 100%;
    z-index: 1;
    position: absolute;
    left: 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap">
  <h2 class="product-titles">Package 1</h2>
  <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img">
</div>
<div id="calendar-wrap">
  <h2 class="product-titles">Package 2</h2>
  <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img">
</div>

Answer 2

了解您的需求。基本上你可以＆＃34;切换＆＃34;单击复选标记方框上的复选标记方形图像上的复选标记图像。这个问题是，一旦你将方格标记放在方格上，切换器就不再起作用了。我想出了一个应该更好一点的解决方案。

基本上，如果我们利用规则，当label被选中并绑定到<input type="checkbox" />时，这将toggle复选框的checked属性。< / p>

然后我们可以在jQuery中绑定到这个事件并显示\隐藏复选标记。在这种情况下，我们不会将任何点击事件绑定到图像，而是复选框的change事件。类似下面的例子。

现在的问题是：

为什么我使用复选框

通过使用复选框，我们可以在表单帖子中捕获结果。通过枚举具有checked属性的所有复选框，还可以轻松识别检查内容。

要将此信息发送到您的服务器，您需要为每个复选框添加name属性，并设置value属性。

＆＃13;

$('.calendar-check').on('change', function() {
  if ($(this).prop('checked'))
    $(this).parents('.calendar-wrap:first').find('.checkmark-img').show();
  else
    $(this).parents('.calendar-wrap:first').find('.checkmark-img').hide();

});

＆＃13;

.package-img {
  width: 60%;
  height: auto;
  opacity: 1;
  margin-left: 20%;
  cursor: pointer;
  transition: 1s;
  -webkit-transition: 1s;
  position: relative;
}

#calendar-wrap,
#tp-wrap {
  width: 100%;
  position: relative;
}

.checkmark-img {
  display: none;
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
}

.calendar-check {
  display: none;
}

.package-check-toggle {
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap" class="calendar-wrap">
  <h2 class="product-titles">Package 1</h2>
  <label for="package-check-1" class="package-check-toggle">
    <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img" />
    <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" alt="Package 1" class="checkmark-img" />
  </label>
  <input type="checkbox" class="calendar-check" id="package-check-1" />
</div>
<div id="calendar-wrap" class="calendar-wrap">
  <h2 class="product-titles">Package 2</h2>
  <label for="package-check-2" class="package-check-toggle">
    <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="calendar-img" />
    <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" alt="Package 2" class="checkmark-img" />
  </label>
  <input type="checkbox" class="calendar-check" id="package-check-2" />
</div>

＆＃13;

示例JSFiddle

修改对于completness sakes，我认为最好只显示一个CSS（3）解决方案。这根本没有依赖于使用jQuery。同样，这会考虑一个复选框（基于值）并根据切换切换复选标记。

标记非常简单。

<div class="calendar-checkmark"> <input type="checkbox" id="checkbox-1" name="checkbox1" value="true" /> <label for="checkbox-1"></label> </div>

示例：

＆＃13;
＆＃13;
.calendar-checkmark input[type=checkbox] { display: none; } .calendar-checkmark label { cursor:pointer; display: block; height: 384px; width: 354px; position:relative; background: url('http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif') no-repeat center center transparent; } .calendar-checkmark label::after { content:' '; display: block; height: 100%; width: 100%; position: absolute; z-index:1; display:none; background: url('https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png') no-repeat center center transparent; } .calendar-checkmark input[type=checkbox]:checked + label::after { display: block; }
＆＃13;
<div class="calendar-checkmark"> <input type="checkbox" id="checkbox-1" name="checkbox1" value="true" /> <label for="checkbox-1"></label> </div>
＆＃13;
＆＃13;
＆＃13;

这里的技巧是使用Adjacent sibling selectors，它允许您根据另一个元素选择相邻的兄弟。因此，如果我们在选中复选框时查看css，则会应用Psudo-class :checked（类似于:hover等）。然后，我们使用相邻的+选择器来找到label。

现在，label元素的css背景设置为方框的图像。接下来它应用了psudo-class ::after，它创建了包含复选框的psudo-element元素。这是在元素之后添加的，当复选框为checked时，psudo类:checked会被添加。然后通过显示元素来改变psudo元素的状态。

Another Fiddle

Answer 3

如果我们只删除框图像并通过CSS创建它们，这可以简单得多。将下载更少，然后我们可以使框的背景透明。这将允许我们只显示和隐藏已经位于每个框后面的复选标记。

$('.package-img').click(function () {
   this.nextElementSibling.classList.toggle("hide");
});

parent { position:relative; }

.package-img {
   border:3px solid black;
   width: 110px;
   height:110px;
   background-color:rgba(0,0,0,0);
   margin-left: 20%;
   cursor: pointer;
   position:relative;
   display:inline-block;
}

.checkmark-img {
    transition:1s;
    width: 15%;
    z-index: -1;
    position:relative;
    margin-left:-15%;
    
}

img.hide { display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2 class="product-titles">Package 1</h2>
<div class="parent">
  <div class="package-img"></div>
  <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img hide">
</div>

<h2 class="product-titles">Package 2</h2>
<div class="parent">
  <div class="package-img"></div>
  <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img hide">
</div>

Answer 4

<强> 1。绝对将Checkmark放在包装图像的顶部

<强> 2。隐藏

第3。使用切换显示

因为它隐藏在它之上，你需要使用兄弟选择器来检索它

 $('.checkmark-img').hide();
 $('.package-img').click(function () {
    $('.checkmark-img').toggle();
 });

.package-img {
        width: 60%;
        height: auto;
        opacity: 1;
        margin-left: 20%;
        cursor: pointer;
        transition:1s; -webkit-transition:1s;
        position: relative;
    }
    #calendar-wrap, #tp-wrap {
        width: 100%;
        position: relative;
    }
    .checkmark-img {
        width: 60%;
        height: auto;
        opacity: 1;
        margin-left: 25%;
        margin-top:10%;
        cursor: pointer;
        transition:1s; -webkit-transition:1s;
        position: absolute;
        width: 50%;
        height: 50%;
        z-index: 1;
       
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap">
      <h2 class="product-titles">Package 1</h2>
      <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">'
      <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img">
</div>
<div id="calendar-wrap">
      <h2 class="product-titles">Package 2</h2>
       <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">'
      <img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img">
      
</div>

通过切换使图像显示在另一个div上

4 个答案: