無法在javascript滑動div中設置文本框值

我對asp.net和javascript（有史以來第一個項目）非常陌生，所以它可能非常簡單。我有一個垂直滑塊http://do-web.com/jcontent/demo。在每個div內是可點擊的div，點擊時應更新文本框的值。無法在javascript滑動div中設置文本框值

如果文本框位於垂直滑塊的外部，則可以很好地工作。

但是我希望文本框在最後一張幻燈片上。當我把它們放在這裏時，無論有多少幻燈片，只有最後一個文本框被更新（下面的例子只有兩個，但已經嘗試過6，而且它只是最後一次更新的文本框）。將必填字段驗證添加到文本框中，但當它們位於滑塊內時，它不起作用。

我假設有一些範圍問題我不知道，希望有人能指出我正確的方向

下面的代碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %> 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <meta name="keywords" content="" /> 
    <meta name="description" content="" /> 
    <link href="css/style.css" rel="stylesheet"/> 
    <link href="css/jcontent.css" rel="stylesheet" type="text/css"/> 
    <link rel="icon" href="favicon.ico" type="image/x-icon"/> 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script type="text/javascript" src="js/jquery.easing.min.1.3.js"></script> 
    <script type="text/javascript" src="js/jquery.jcontent.0.8.min.js"></script>  
    <script type="text/javascript"> 
     $("document").ready(function() { 
      $("div#demo").jContent({ 
       orientation: 'vertical', 
       width: 960, 
       height: 360, 
       easing: "easeOutCirc" 
      }); 
     }); 
    </script> 
    <script> 
     function option(i, x) { 
      $(i).val(x); 
     } 
    </script> 
</head> 
<body>  
    <form id="form1" runat="server"> 
     <div id="page">  
      <div id="main">  
       <div id="demo"> 
        <a title="" href="#" class="prev" style="font:12px arial black; width:50px; left:0px; margin-right:425px;">PREV</a> 
        <a title="" href="#" class="next" style="font:12px arial black; width:50px; right:0px; margin-left:425px;">NEXT</a>      
        <div class="slides" style="border-top:solid 1px #0078AD"> 
         <div style="position:relative;"> 
          <div class="title">Jack Size</div> 
          <div id="slide1option1" onclick="option('.option1t','C00');" style="position:absolute; top:20px; left:0; height:340px; width:480px; cursor:pointer;"> 
           <img id="C00" src="images/slides/slide1_1.jpg" onmouseover="this.src='images/slides/slide1_1_focus.jpg'" onmouseout="this.src='images/slides/slide1_1.jpg'" border="0"/> 
          </div> 
          <div id="slide1option2" onclick="option('.option1t','C01')" style="position:absolute; top:20px; left:240px; height:340px; width:480px; cursor:pointer;"> 
           <img id="C01" src="images/slides/slide1_2.jpg" onmouseover="this.src='images/slides/slide1_2_focus.jpg'" onmouseout="this.src='images/slides/slide1_2.jpg'" border="0"/> 
          </div> 
         </div> 
         <div style="position:relative;"> 
          <div class="title">Jack Type</div> 
          <div id="slide2option1" onclick="option('.option2t','TS')" style="position:absolute; top:20px; left:0; height:340px; width:480px; cursor:pointer;"> 
           <img id="TS" src="images/slides/slide2_1.jpg" onmouseover="this.src='images/slides/slide2_1_focus.jpg'" onmouseout="this.src='images/slides/slide2_1.jpg'" border="0"/> 
          </div> 
          <div id="slide2option2" onclick="option('.option2t','KS')" style="position:absolute; top:20px; left:320px; height:340px; width:480px; cursor:pointer;"> 
           <img id="KS" src="images/slides/slide2_2.jpg" onmouseover="this.src='images/slides/slide2_2_focus.jpg'" onmouseout="this.src='images/slides/slide2_2.jpg'" border="0"/> 
          </div> 
         </div>  
         <div style="position:relative;"> 
          <asp:TextBox id="TextBox1" class="option1t" runat="server" Width="30px"></asp:TextBox> 
          <asp:TextBox id="TextBox2" class="option2t" runat="server" Width="30px"></asp:TextBox> 
         </div> 
        </div>                    
       </div> 

      </div> 
     </div> 
    </form> 
</body> 
</html>

來源

2014-02-07 RobLaw84

這是因爲當您在滑塊中單擊next/prev時，幻燈片將從DOM中移除，並附加到滑塊上或添加到其他位置。

所以你點擊第一頁上的按鈕。您的文本框更新得很好，但是當您切換幻燈片時，它們會被重新創建並被視爲兩個全新的完全空文本框。

您需要將選項存儲在其他位置，並在您實際訪問該幻燈片時填充文本框。有多種方法可以做到這一點，將其存儲在數據屬性，隱藏的輸入字段或僅存在於全局JavaScript數組中。

我已經使用了最後一個在下面的例子：

HTML

更改onclick到：

onclick="option('option1t','C01')"

通知我option1t之前刪除.。

在這裏，我充滿了你點擊Next每次存儲的selected數組中的選項文本框。

var selected = []; 

function option(i, x) { 
    selected[i] = x; 
} 

$("document").ready(function() { 

    $("div#demo").jContent({ 
     orientation: 'vertical', 
     width: 360, 
     height: 360, 
     easing: "easeOutCirc" 
    }); 

    $('.next').click(function() { 
     if (typeof selected['option1t'] != 'undefined') { 
      $('.option1t').val(selected['option1t']); 
     } 
     if (typeof selected['option2t'] != 'undefined') { 
      $('.option2t').val(selected['option2t']); 
     } 
    }); 
});

，你會發現一個演示here

來源

2014-02-07 11:46:52

這是完美的，感謝偉大的解釋和幫助！ – RobLaw84

任何想法爲什麼所需的字段驗證不會在文本框中工作？ – RobLaw84

很難說。 ''應該沒有任何問題，將文本框移除並再次添加到DOM。您應該將它們添加到您的代碼示例中以獲得進一步的幫助，但最好發佈一個關於它的新問題。 –

無法在javascript滑動div中設置文本框值

回答

相關問題