-1

我的功能似乎沒有正確執行。哪裏不對？我已經花了5個小時試圖讓這個dang功能起作用。最終我會把照片上的鏈接。我的javascript功能似乎沒有工作。我不明白爲什麼

<html> 
    <head> 
     <script type="text/javascript"> 
      var pagenumber=1; 
      function increase() 
      { 
       if(pagenumber == 1) 
       { 
       return 
       } 
       pagenumber++; 
      } 
      function decrease() 
      { 
       if(pagenumber == 5) 
       { 
       return 
       } 
       pagenumber--; 
      } 
      function slider() { 
       if(pagenumber == 1) 
       { 
       document.getElementById('pg1').style.display='inline'; 
       document.getElementById('pg2').style.display='none'; 
       document.getElementById('down').style.cursor='not-allowed'; 
       document.getElementById('down').style.background-position='top'; 

      } 
      if(pagenumber == 2) 
      { 
       document.getElementById('pg1').style.display='h'; 
       document.getElementById('pg3').style.display='none'; 
       document.getElementById('pg2').style.display='inline';     
       document.getElementById('down').style.cursor='pointer'; 
       document.getElementById('down').style.background-position='bottom'; 

      } 
      if(pagenumber == 3) 
      { 
       document.getElementById('pg2').style.display='none'; 
       document.getElementById('pg4').style.display='none'; 
       document.getElementById('pg3').style.display='inline'; 
      } 
      if(pagenumber == 4) 
      { 
       document.getElementById('pg3').style.display='none'; 
       document.getElementById('pg5').style.display='none'; 
       document.getElementById('pg4').style.display='inline'; 
       document.getElementById('down').style.cursor='pointer'; 
       document.getElementById('up').style.background-position='top'; 

      } 
      if(pagenumber == 5) 
      { 
       document.getElementById('pg4').style.display='none'; 
       document.getElementById('pg5').style.display='inline'; 
       document.getElementById('up').style.cursor='not-allowed'; 
       document.getElementById('up').style.background-position='bottom'; 
      } 
     } 
    </script> 
</head> 
<body height="183px" bgcolor="#F3F3F3" style="width:279px"> 
    <div id="down" style="float:left;margin-top:29px;height:27px;width:15px;display:block;cursor:pointer;background:url('website/arrow_left.png') no-repeat top left;background-repeat:no-repeat;background-position:top"> 
     <img src="website/pixel.png" width="15px" height="30px" onclick="decrease()" onclick="slider()"> 
    </div> 
    <div id="up" style="float:right;margin-top:29px;height:27px;width:15px;display:block;cursor:pointer;background:url('website/arrow_right.png') no-repeat top left;background-repeat:no-repeat;background-position:top"> 
     <img src="website/pixel.png" width="15px" height="30px" onclick="increase()" onclick="slider()"> 
    </div> 
    <table style="background:url('website/arrow_middle.png') no-repeat center" align="center"> 
      <tr id="pg1" style="display:inline"> 
       <td style="padding-left:25px; padding-right:25px"> 
        <a href="google.com"> 
         <img src="website/oil.jpg" width="75px" height="75px"> 
        </a> 
       </td> 
       <td style="padding-right:25px"> 
        <a href="amazon.com"> 
         <img src="website/gas.jpg" width="75px" height="75px"> 
        </a> 
       </td> 
      </tr> 
      <tr id="pg2" style="display:none"> 
       <td style="padding-left:25px; padding-right:25px"> 
        <a href="google.com"> 
         <img src="website/nuclear.jpg" width="75px" height="75px"> 
        </a> 
       </td> 
       <td style="padding-right:25px"> 
        <a href="amazon.com"> 
         <img src="website/solar.jpg" width="75px" height="75px"> 
        </a> 
       </td> 
       </tr> 
       <tr id="pg3" style="display:none"> 
        <td style="padding-left:25px; padding-right:25px"> 
         <a href="google.com"> 
          <img src="website/wind.jpg" width="75px" height="75px"> 
         </a> 
        </td> 
        <td style="padding-right:25px"> 
         <a href="amazon.com"> 
          <img src="website/hydro.jpg" width="75px" height="75px"> 
         </a> 
        </td> 
       </tr> 
       <tr id="pg4" style="display:none"> 
        <td style="padding-left:25px; padding-right:25px"> 
         <a href="google.com"> 
          <img src="website/electric.jpg" width="75px" height="75px"> 
         </a> 
        </td> 
        <td style="padding-right:25px"> 
         <a href="amazon.com"> 
          <img src="website/thermal.jpg" width="75px" height="75px"> 
         </a> 
        </td> 
       </tr> 
       <tr id="pg5" style="display:none"> 
        <td style="padding-left:25px; padding-right:25px"> 
         <a href="google.com"> 
          <img src="website/mining.jpg" width="75px" height="75px"> 
         </a> 
        </td> 
        <td style="padding-right:25px"> 
         <a href="amazon.com"> 
          <img src="website/transversal.jpg" width="75px" height="75px"> 
         </a> 
        </td> 
       </tr> 
     </table> 
    </body> 
</html>

來源

2013-09-01 user2557171

只是一個提示：你在做'if（x == 1）if（x == 2）etc'。更好的方法是使用'if（x == 1）else if（x == 2）etc'，最好的方法是使用[switch]（https://developer.mozilla.org/en-US/文檔/網絡/的JavaScript /參考/語句/開關）。 – Itay

你應該在jsfiddle中得到一個工作示例。建立鏈接並儘可能使其工作，並且人們將更有能力幫助您解決問題。我已經在這裏爲你啓動了一個： http://jsfiddle.net/loweryaustin/3hTTN/ – Austin

問題1：

這條線的問題是：

if($pagenumber == 1)

改變這一行：

if(pagenumber == 1)

當你的變量名是pagenumber這裏：

var pagenumber=1;

問題2：

您檢查pagenumber == 1後立即返回，這就是爲什麼它從來沒有增加。你的代碼更改爲：

if(pagenumber == 1) 
    return ++pagenumber;

如果你不想從函數的返回值，則：

function increase() { 
    if(pagenumber == 1) 
     pagenumber++; 
}

還要確保只有一個onclick事件處理程序的HTML代碼。

來源

2013-09-01 05:21:59 anubhava

我認爲它也會卡住在1 – Itay

我修正了這個問題，但它仍然無效。 – user2557171

檢查編輯問題2 – anubhava

變量的美元符號僅用於諸如PHP之類的語言。在第7行拿出美元符號，當你比較if中的變量和你應該很好走的時候。

if($pagenumber == 1)

到

if(pagenumber == 1)

UPDATE 1：

此外，您的元件具有2個不同的onclick屬性設置。如果你想要一個onclick調用2個函數試試這個：

<img src="website/pixel.png" width="15px" height="30px" onclick="increase();slider()">

更新2：

要通過JavaScript改變background-position CSS屬性，該屬性被稱爲backgorundPosition。所以，試試這個：

document.getElementById('down').style.backgroundPosition = 'bottom';

來源

2013-09-01 05:23:56 Tom

問題已解決。 – user2557171

得到它的工作：http://jsfiddle.net/xGWp3/1/

問題1

$pagenumber必須pagenumber

問題2

pagenumber不能增加;如果它的起始位置是1，則increase()函數會在其遞增之前返回。

嘗試重寫increase()和decrease()像這樣：

function increase() 
{ 
    if (pagenumber < 5) 
    { 
     pagenumber++; 
    } 
} 

function decrease() 
{ 
    if (pagenumber > 1) 
    { 
     pagenumber--; 
    } 
}

問題3

您可能還需要改變你的onclick屬性是形式onclick="increase(); slider()"的;我不認爲你在一個HTML標籤上可以有兩個onclick屬性。

問題4

你的職能不作爲宣佈在全球範圍內;嘗試宣告他們是這樣的：

increase = function() 
{ 
    //... 
}

問題5

document.getElementById('pg1').style.display='h';

應該

document.getElementById('pg1').style.display='none';

隨着所有這些討論，代碼似乎工作：http://jsfiddle.net/xGWp3/1/

來源

2013-09-01 05:29:21

仍然無法正常工作 – user2557171

我的javascript功能似乎沒有工作。我不明白爲什麼

回答

問題1

問題2

問題3

問題4

問題5

相關問題