javascript - 将 ID 结果传递给 IF 语句

Question

在图像之间滑动的能力（工作正常：

    <div id='mySwipe' style='width:720px; height:981px; margin-top:55px;' class='swipe'>
      <div class='swipe-wrap'>
        <div><a id="cast1" onClick="change('cast1'); return false" href="#"><img src="../slider/alexis-slider.png" /></a></div>
        <div><a id="cast2" onClick="change('cast2'); return false" href="#"><img src="../slider/joanna-slider.png" /></a></div>
        <div><a id="cast3" onClick="change('cast3'); return false" href="#"><img src="../slider/adriana-slider.png" /></a></div>
        <div><a id="cast4" onClick="change('cast4'); return false" href="#"><img src="../slider/melissa-slider.png" /></a></div>
      </div>
    </div>
<script>
// pure JS
    var elem = document.getElementById('mySwipe');
    window.mySwipe = Swipe(elem, {
    });
</script>

以下代码采用 cast# id 并为其指定一个特定的类，因此它知道要显示哪个图像（图像在 CSS 中标识）。

<script type="text/javascript" language="Javascript/1.2">
    function change(v) {
    var target = document.getElementById("target");

         if (v == "cast1") {target.className = "imgA";} 
    else if (v == "cast2") {target.className = "imgB";} 
    else if (v == "cast3") {target.className = "imgC";} 
    else if (v == "cast4") {target.className = "imgD";} 

    else {target.className = "bio";}
}

function changeReset() {
    var target = document.getElementById("target");
    target.className = "bio";
}

// pure JS
    var elem = document.getElementById('mySwipe');
    window.mySwipe = Swipe(elem, {
    });
</script>

这两个代码片段单独工作正常，但我不知道如何将 id 结果从刷卡代码（cast1、2,3 或 4）传递到 if 语句。有人可以帮助我吗，我已经为此工作了将近 2 周。我认为这很简单，但我对 javascript 不是很好。

这是CSS：

.swipe {overflow: hidden; visibility: hidden; position: relative;}
.swipe-wrap {overflow: hidden; position: relative;}
.swipe-wrap > div {float:left; width:100%; position: relative;}
#mySwipe div b {display:block; margin:0px; margin-top:240px; background:url(""); height:1280px; width:720px;}
#inner {background: url("../bio_footer/alexis-bio.png") no-repeat 0 0; height:440px; width:800px;}
#target {background: url("") no-repeat 0 0; height:440px; width:800px;}
.bio {height:440px; width:800px;}
.imgA{background: url("../bio_footer/alexis-bio.png") no-repeat 0 0; height:440px; width:800px;} 
.imgB{background: url("../bio_footer/joanna-bio.png") no-repeat 0 0; height:440px; width:800px;} 
.imgC{background: url("../bio_footer/adriana-bio.png") no-repeat 0 0; height:440px; width:800px;} 
.imgD{background: url("../bio_footer/melissa-bio.png") no-repeat 0 0; height:440px; width:800px;}

.container {bottom:106px ;display:none ;position:absolute;} 

Answer 1

您可以使用 swype 的回调方法。 在此处观看示例。

window.mySwipe = Swipe(elem, {
  // startSlide: 4,
  auto: 3000,
  callback: function(index, element) {
  var required_id = $(element).attr('id');
  alert(required_id);
   },

});

Answer 2

我想通了，谢谢。

我只需要了解代码所做的事情超出了我的预期。