Jquery 和 Javascript 相结合。代码不起作用答案

【问题标题】：Jquery and Javascript combined. Code not workingJquery 和 Javascript 相结合。代码不起作用
【发布时间】：2017-12-11 04:51:50
【问题描述】：

我写了下面的代码来显示一个选择的图像

当在页面上单击某个按钮时的

标记。 Jquery隐藏了

页面加载时的

元素有效，但其余代码什么也不做。谁能帮我解决这个问题？

    $(document).ready(function(){
    //Create Array for images
    var vanImgArr = new Array("<img src='img\yvr\coalharbour.jpg'>", "<img src='img\yvr\lgbridge.jpg'>", "<img src='img/yvr/yaletown.jpg'/>", "<img src='img\yvr\lgbridge2.jpg'>");
    var sgpImgArr = new Array("<img src='img\sgp\elginbridge.jpg'>", "<img src='img\sgp\mbfc.jpg'>", "<img src='img\sgp\sgpdusk.jpg'>", "<img src='img\sgp\sgppano.jpg'>");
    var aniImgArr = new Array("<img src='img\ani\cat1.jpg'>", "<img src='img\ani\cat2.jpg'>", "<img src='img\ani\dog1.jpg'>", "<img src='img\ani\tandd.jpg'>");
    var absImgArr = new Array("<img src='img\abs\abs1.jpg'>", "<img src='img\abs\abs2.jpg'>", "<img src='img\abs\abs3.jpg'>", "<img src='img\abs\abs4.jpg'>");
    var clickedId;
    var idx = 0;
    //to display images
    function displayImgs(arr)
    {

        if(idx <= arr.length)
        {
            ('#pic').hide();
            ('#pic').html(arr[idx]);
            ('#pic').fadeIn('slow');
            if(idx > arr.length)
            {
                idx = 0;
            }
            else 
            {
                idx++;
            }       
        };  //button click close        
    }//displayImgs method close

    //on page load
    $('p').hide();

    //More info Action
    $('#more').hover(function(){
        $('#info, #info2').fadeIn('slow');  
    });

    //Button Click Action
    $(':button').click(function(){
        clickedId = this.id;
        alert(clickedId); //testing
        switch(clickedId)
        {
            case 'yvr':
                displayImgs(vanImgArr);
                break;          

            case 'sgp':
                displayImgs(sgpImgArr);
                break;

            case 'ani':
                displayImgs(aniImgArr);
                break;

            case 'abs':
                displayImgs(absImgArr);
                break;
        }//switch/case close
    });//button click close
});

这是我上面的 HTML 代码

<!DOCTYPE html>

<title>Ricky Deacon CSIS3380-001, Assignment 2, Summer 2017</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js"></script>

<table class="t1">

    <tr>
        <th width="25%" rowspan="3"><img src="img\rick2.JPG" alt="RD portrait goes here"></th>
        <th width="50%" colspan="2">Rick Deacon</th>
        <th width="25%" rowspan="3"><img src="img\rick1.JPG" alt="RD portrait goes here"></th>
    </tr>
    <tr>
        <td id="subtitle" colspan="2">Photography Showcase</td> 
    </tr>
    <tr>
        <td id="desc" colspan="2">Click the corresponding button to display images from your chosen category.</td>
    </tr>                   
</table>    
<br/>
<br/>
<table class="t2">
    <tr>
        <th>
             <input id="van" type="button" name="submit" value="Show Vancouver Images"/>                 
         </th>
         <th>
             <input id="sgp" type="button" name="submit" value="Show Singapore Images"/>                 
         </th>  
         <th>
             <input id="ani" type="button" name="submit" value="Show Animal Images"/>                
         </th>  
         <th>
             <input id="abs" type="button" name="submit" value="Show Abstract Images"/>              
         </th>              
    </tr>
    <tr>
        <th>
             <p id="info"><a href="https://flickr.com/rick-deacon">Rick Deacon's Flickr</a></p>
        </th>
        <th colspan="2">
            <h1 id="more">More Info and Portfolio Links</h1>    
        </th>
        <th>
             <p id="info2"><a href="https://rick-deacon.pixels.com/">Prints For Sale</a></p>
        </th>
    </tr>
</table>
<br/>
<br/>
<p id="pic" align="center">Image Goes Here</p>

【问题讨论】：

使用 $('#id').html 来获取值。在第 15、16、17 行
您有四个图像数组，每个数组都分配给一个按钮。那么，假设有人点击其中一个按钮，会发生什么？我问的原因是有一些代码一次显示一张图像，但在你的问题中你说显示图像的“选择”。
Nikolas - 谢谢，完全错过了！ James - 来自适当数组的图像应显示在 ID 为 #pic 的
中。每次单击其中一个按钮时 J.Maria - 在这种情况下不需要多个 idx，无论来自哪个图像都无关紧要数组首先显示

标签： javascript jquery arrays image

【解决方案1】：

我认为您忘记了代码上的 $ 符号。你的display 函数应该是这样的

function displayImgs(arr){

    if(idx <= arr.length)
    {
        $('#pic').hide();
        $('#pic').html(arr[idx]);
        $('#pic').fadeIn('slow');
        if(idx > arr.length)
        {
            idx = 0;
        }
        else 
        {
            idx++;
        }       
    };  //button click close        
}//displayImgs

另外，你不应该为每个数组使用一个 idX 吗？

【讨论】：

感谢 J.M，我添加了 $ 符号，但它仍然无法正常工作。此外，不需要多个 idx 变量，因为首先显示数组中的哪个图像并不重要，并且对于本程序的目的，所有数组的大小都相同

【解决方案2】：

您的 JavaScript 引用了您的标记中不存在的元素。

首先，"more" 的 id 中没有元素，因此“更多信息”操作将永远不会运行。其次，您在“按钮单击”操作中定位button 元素，但我也没有看到button 元素——只有<input type="button" />，您必须使用$(":button, input[type='button']") 指定它（这两个选择器中的任何一个都将工作）。

【讨论】：

感谢 brogrammer - 我在 h1 标签中添加了更多的 id，现在它运行正常，我确定我之前有它，一定是在某个地方删除了它。我还补充说：在按钮之前，现在测试警报显示正确，但我得到一个 x 应该显示图像的位置......

【解决方案3】：

当您的 html 中没有按钮标签时，您正在选择按钮标签。您应该使用 $('input[type="button"]') 选择输入标签但这在调试时可能不是一个好习惯，因此您应该为输入标签指定一个名称，然后使用 $('input[name="elementname"]')。第二。在“this.id”不是正确的语法你应该使用 $(this).attr('id');

【讨论】：