Question

我对JavaScript和jQuery还是陌生的，我真的可以在这里使用一些帮助。

我有一个click事件和一个keyup事件，其中keyup事件仅在发生click事件时才可用。

我有一系列图像，单击每个图像都应触发一个modal图像。

<!-- Images -->
<div class="col1">
    <!-- Trigger the Modal -->
    <img class="storyboardImg" id="1" src="storyboard-1.jpg"></img>
</div>
<div class="col1">
    <img class="storyboardImg" id="2" src="storyboard-1.jpg"></img>
</div>
<div class="col1">
    <img class="storyboardImg" id="3" src="storyboard-1.jpg"></img>
</div>


<!-- The Modals -->
<div id="storyboardModal" class="modal">
    <!-- The Close Function -->
    <span class="closeModal" onclick=
    "document.getElementById('storyboardModal').style.display='none'"> 
    x&times;</span>
    <!-- Modal Content (The Image) -->
    <img class="modal-content" id="img01">
    <!-- Modal Caption (Image Text) -->
    <div id="caption"></div>
</div>

当通过以下JS中的click事件激活模式图像时，只有这样才能使用键盘上的向左和向右箭头键导航到系列中的上一个和下一个图像。通过keyup函数可用）。

我尝试引入一个名为"modalActive"的变量，默认情况下将其设置为"0"，作为click事件的一部分，应为该变量分配一个新值"1" 。这个想法是keyup事件仅在"modalActive"的值为“ 1”时才可用，如下所示。但是，当变量值为keyup时，似乎不读取"1"函数。

<script>
var modal = document.getElementById('storyboardModal');

var img = $('.storyboardImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");

var currentId = null;
var modalActive = "0";

$('.storyboardImg').click(function(){
    var id = this.getAttribute("id");
    currentId = id;
    modal.style.display = "block";
    captionText.innerHTML = this.alt;
    var newSrc = this.src;
    modalImg.attr('src', newSrc);
    modalActive = "1";
})

if (modalActive == "1") {
$(document).on("keyup", function (e) {
    // Left Arrow Key
    if (e.which===37 && currentId <= 1) {
    document.getElementById('storyboardModal').style.display='none';
        modalActive = null;
    } 
    else if (e.which === 37 && currentId > 1) {
        currentId--;
        $(".modal").fadeOut(300);
        //$("#storyboardModal" + currentId).fadeIn(300);    
        modal.style.display = "block";
        var newSrc1 = document.getElementById(currentId).src;
        modalImg.attr('src', newSrc1);
        captionText.innerHTML = this.alt;
    } 
    // Right Arrow Key
    else if (e.which === 39 && currentId >= 6) {

    document.getElementById('storyboardModal').style.display='none';
        modalActive = null;
    } 
    else if (e.which === 39 && currentId < 6) {
        currentId++;
        $(".modal").fadeOut(300);
        modal.style.display = "block";
        var newSrc2 = document.getElementById(currentId).src;
        modalImg.attr('src', newSrc2);
        captionText.innerHTML = this.alt;

    }
});
}

/***** close Modal *****/

var span = document.getElementsByClassName("closeModal")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
   modalActive = null;
   $(".modal").fadeOut(300);
}
</script>

在点击事件中似乎没有为变量"modalActive"分配新值。有人可以指出我在这里做错了吗？。

Answer 1

要使代码正常工作，您应该将modalActive检查移到keyup函数声明中

$(document).on("keyup", function (e) {
  if (modalActive == "1") {
    // Left Arrow Key
    if (e.which===37 && currentId <= 1) {
      ...

您的代码失败的原因是<script>标记内的代码仅执行一次（在页面加载时），而此时modalActive为false，并且您的keyup事件将不会被注册并且永远不会执行。进行此更改后，该事件将在页面加载时注册，并且对其进行操作的检查将改为在事件函数中进行。

在jQuery中的click事件中为变量分配值

1 个答案: