Question

我编写了以下代码，以便在页面上单击某个按钮时在

标记内显示一系列图像。在页面加载时隐藏

元素的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>

Answer 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吗？

Answer 2

您的JavaScript指的是您的标记中不存在的元素。

首先，id的{{1}}没有元素，因此“更多信息”操作永远不会运行。其次，您在“按钮点击”操作中定位"more"元素，但我看不到button元素 - 仅button，您必须使用<input type="button" />指定（这两个选择器中的任何一个都可以工作）。

Answer 3

您正在选择按钮标签，而html中没有按钮标签。您应该使用$（'input [type =“button”]'）选择输入标签但这在调试时可能不是很好的做法，所以你应该为输入标签分配一个名称，然后使用它来选择它们 $（ '输入[名称= “的ElementName”]'）。第二。在“this.id”中，你应该使用$（this）.attr（'id'）;

Jquery和Javascript结合在一起。代码无效

3 个答案: