Question

我想通过使用onclick来更改var1和init。如果我将var1和var init设置为常量值，则按钮+6和-6正常工作。所以现在我想用onclick更改var1和init。但onclick不提交var。我希望你能帮助我。

<script type="text/javascript">
// Bilder hier angeben (ein Bild pro Zeile, das erste Bild auch im Img-Tag als src angeben!)

var images = new Array(
  'http://www2.wetter3.de/Animation_' + init + '_UTC/00_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/06_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/12_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/18_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/24_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/30_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/36_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/42_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/48_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/54_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/60_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/66_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/72_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/78_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/84_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/90_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/96_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/102_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/108_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/114_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/120_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/126_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/126_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/132_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/138_' + var1 + '.gif',
  'http://www2.wetter3.de/Animation_' + init + '_UTC/144_' + var1 + '.gif'
);

// Aktueller Bildindex (beim Start 0)
var current_index = 0;


// Bilderwechsel durchführen
function switch_image(direction) {
  var count = images.length;
  current_index += (direction ? 1 : -1);
  if (current_index == count) {
    current_index = 0;
  } else if (current_index < 0) {
    current_index = count - 1;
  }
  document.getElementById('image_switch').src = images[current_index];
}

</script>
</head>
<body>

<div style="text-align:center">

  <!-- Das erste Bild hier als src mit angeben! -->
  <img src="http://www2.wetter3.de/Animation_12_UTC/00_1.gif" id="image_switch" alt="" />

  <br />

  <!-- Pfeil nach links -->

 <input type="button" name="-6" value="-6"  onclick="switch_image(0)">
  <!-- Pfeil nach rechts -->
 <input type="button" name="+6"     value="+6"  onclick="switch_image(1)">

</div>

</p> 
<p>
 <input type="button" name="00 UTC" value="00 UTC" onclick="var init='00';">
 <input type="button" name="06 UTC" value="06 UTC" onclick="var init='06';">
 <input type="button" name="12 UTC" value="12 UTC" onclick="var init='12';">
 <input type="button" name="18 UTC" value="18 UTC" onclick="var init='18';">

</p>
<p>
 <input type="button" name="1" value="var1" onclick="var var1='1';">
 <input type="button" name="2" value="var2" onclick="var var1='2';">
 <input type="button" name="3" value="var3" onclick="var var1='3';">
 <input type="button" name="4" value="var4" onclick="var var1='4';">

</p>

Answer 1

使用您的结构

每次要更改变量时都需要重建数组。我建议将其转移到专用功能：

var images, init = '00', var1 = '1';

function setArray(){
    images = new Array(
      'http://www2.wetter3.de/Animation_' + init + '_UTC/00_' + var1 + '.gif',
      'http://www2.wetter3.de/Animation_' + init + '_UTC/06_' + var1 + '.gif',
      //etc..
    );
}
setArray(); // Set the default array.

然后，您需要通过按钮单击调用的功能来更改变量。我个人会使用javascript点击事件而不是内联脚本，但坚持你的方法：

function changeVar1(val){
    var1 = val;
    setArray();
}

function changeInit(val){
    init = val;
    setArray();
}

然后你的按钮看起来像这样：

<input type="button" name="00 UTC" value="00 UTC" onclick="changeInit('00');">

<input type="button" name="1" value="var1" onclick="changeVar1('1');">

替代方法（需要JQuery）

这就是我个人的做法，它确实使用了JQuery（因为这是我很满意的），但如果你想要解决它，你可以在没有JQuery的情况下做同样的事情。

var images, init = '00', var1 = '1';

function setArray(){
   images = new Array();
   for(var i = 0; i <= 144; i++){
      var val = i < 10 ? "0" + i : "" + i;
      images.push('http://www2.wetter3.de/Animation_' + init + '_UTC/' + val + '_' + var1 + '.gif');
   }
};

$(document).ready(function(){
    setArray(); // Set default array.

    $(".changeinit").click(function(){
        init = $(this).data("val");
        setArray();
    });

    $(".changevar").click(function(){
        var1 = $(this).data("val");
        setArray();
    });
});

你的HTML按钮就像这样：

<input type="button" name="00 UTC" value="00 UTC" class="changeinit" data-val="00">
<input type="button" name="06 UTC" value="06 UTC" class="changeinit" data-val="06">
<input type="button" name="12 UTC" value="12 UTC" class="changeinit" data-val="12">
<input type="button" name="18 UTC" value="18 UTC" class="changeinit" data-val="18">

<input type="button" name="1" value="var1" class="changevar" data-val="1">
<input type="button" name="2" value="var2" class="changevar" data-val="2">
<input type="button" name="3" value="var3" class="changevar" data-val="3">
<input type="button" name="4" value="var4" class="changevar" data-val="4">

Answer 2

这是工作版本：

    <script type="text/javascript">
// Bilder hier angeben (ein Bild pro Zeile, das erste Bild auch im Img-Tag als src angeben!)
var init = '00';
var var1 = '1';

var images = new Array(
  'http://www2.wetter3.de/Animation_{init}_UTC/00_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/06_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/12_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/18_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/24_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/30_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/36_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/42_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/48_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/54_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/60_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/66_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/72_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/78_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/84_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/90_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/96_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/102_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/108_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/114_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/120_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/126_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/126_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/132_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/138_{var1}.gif',
  'http://www2.wetter3.de/Animation_{init}_UTC/144_{var1}.gif'
);

// Aktueller Bildindex (beim Start 0)
var current_index = 0;


// Bilderwechsel durchführen
function switch_image(direction) {
  var count = images.length;
  current_index += (direction ? 1 : -1);
  if (current_index == count) {
    current_index = 0;
  } else if (current_index < 0) {
    current_index = count - 1;
  }
  document.getElementById('image_switch').src = images[current_index].replace("{init}", init).replace("{var1}",var1);
}

</script>
</head>
<body>

<div style="text-align:center">

  <!-- Das erste Bild hier als src mit angeben! -->
  <img src="http://www2.wetter3.de/Animation_12_UTC/00_1.gif" id="image_switch" alt="" />

  <br />

  <!-- Pfeil nach links -->

 <input type="button" name="-6" value="-6"  onclick="switch_image(0)">
  <!-- Pfeil nach rechts -->
 <input type="button" name="+6"     value="+6"  onclick="switch_image(1)">

</div>

</p> 
<p>
 <input type="button" name="00 UTC" value="00 UTC" onclick="init='00';">
 <input type="button" name="06 UTC" value="06 UTC" onclick="init='06';">
 <input type="button" name="12 UTC" value="12 UTC" onclick="init='12';">
 <input type="button" name="18 UTC" value="18 UTC" onclick="init='18';">

</p>
<p>
 <input type="button" name="1" value="var1" onclick="var1='1';">
 <input type="button" name="2" value="var2" onclick="var1='2';">
 <input type="button" name="3" value="var3" onclick="var1='3';">
 <input type="button" name="4" value="var4" onclick="var1='4';">

</p>

通过onclick更改Javascript变量

2 个答案: