点击DOM时增加和减少数量

时间:2017-09-22 14:44:14

标签: jquery dom

点击+-,我想显示增量和减量数字。我该怎么做?谢谢:))

这是我的代码 - >



var minutes = 25,
    seconds = 0,
    isPaused = true,
    timerId = 0,
    remainingTime,
    countdownHandle,
    plus = document.getElementByClassName('plus');
    show = document.getElementByClassName('value');


function plus(){
  $('.plus').on('click', function(){
    minutes++;
    $('.value').html(minutes);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="control-wrapper" id="session">
    <div class="control-header">SESSION LENGTH</div>
        <div class="control">
          <div class="plus">+</div>
          <div class="value">25</div>
          <div class="minus">-</div>
    </div>
</div>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:1)

  1. getElementByClassName是复数,所以你需要getElementsByClassName()[0] - 但实际上根本不需要它,因为你有jQuery。如果你必须使用DOM document.querySelector(".plus"),但目前你的代码中根本没有使用vars plusshow
  2. 您需要使用$function() {... });而不是您不打电话的功能。它在页面加载并且您的元素存在时执行
  3. show不在var中,因为你在前一行之一上有分号
  4. var minutes = 25,
        seconds = 0,
        isPaused = true,
        timerId = 0,
        remainingTime,
        countdownHandle;
    
    
    $(function() { // on page load
      $('.plus').on('click', function(){
        minutes++;
        $('.value').html(minutes);
      });
      $('.minus').on('click', function(){
        minutes--;
        $('.value').html(minutes);
      });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <div class="control-wrapper" id="session">
        <div class="control-header">SESSION LENGTH</div>
            <div class="control">
              <div class="plus">+</div>
              <div class="value">25</div>
              <div class="minus">-</div>
        </div>
    </div>

答案 1 :(得分:0)

我尽可能少地修改你的代码以使其正常工作。

&#13;
&#13;
var minutes = 25,
    seconds = 0,
    isPaused = true,
    timerId = 0,
    remainingTime,
    countdownHandle,
    plus = document.querySelector('.plus'),
    show = document.querySelector('.value');



  $('.plus').on('click', function() {
    minutes++;
    $('.value').html(minutes);
  });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="control-wrapper" id="session">
    <div class="control-header">SESSION LENGTH</div>
        <div class="control">
          <button class="plus">+</button>
          <div class="value">25</div>
          <button class="minus">-</button>
    </div>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您可以使用解决方案

$('.plus').click(function(){
  $('.value').html(parseInt($('.value').text()) + 1);
});

$('.minus').click(function(){
  $('.value').html(parseInt($('.value').text()) - 1);
});
.plus, .minus {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-wrapper" id="session">
  <div class="control-header">SESSION LENGTH</div>
  <div class="control">
    <div class="plus">+</div>
    <div class="value">25</div>
    <div class="minus">-</div>
  </div>
</div>

希望这会对你有所帮助。

答案 3 :(得分:0)

使用jquery简单

1>------ Derleme başladı: Proje: Dokuza, Yapılandırma: Debug Any CPU ------
1>  Dokuza -> C:\Users\seher\OneDrive\Belgeler\visual studio 2017\Projects\Dokuza\Dokuza\bin\Debug\Dokuza.dll
1>    Processing: obj\Debug\res\layout\main.xml
1>    Processing: obj\Debug\res\values\strings.xml
1>    Processing: obj\Debug\res\layout\main.xml
1>    Processing: obj\Debug\res\values\strings.xml
2>VisualStudio_android-23_x86_phone dağıtmayı başlat ...
2>VisualStudio_android-23_x86_phone öykünücüsü başlatılıyor...
2>C:\PROGRA~2\Android\ANDROI~1\tools\emulator.EXE -partition-size 512 -no-boot-anim -avd VisualStudio_android-23_x86_phone -prop monodroid.avdname=VisualStudio_android-23_x86_phone
2>Hax is enabled
2>Hax ram_size 0x40000000
2>HAX is working and emulator runs in fast virt mode.
2>emulator: Listening for console connections on port: 5554
2>emulator: Serial number of this emulator (for ADB): emulator-5554
2>VisualStudio_android-23_x86_phone öykünücüsü çalışıyor.
2>Öykünücünün hazır olması bekleniyor...
2>...
2>VisualStudio_android-23_x86_phone dağıtılıyor...
2>Oluşturma başlatıldı.
2>"Dokuza.csproj" projesi (Install hedef):
2>C:\Program Files\Java\jdk1.8.0_131\\bin\keytool.exe -list -alias androiddebugkey -storepass android -keypass android -keystore "C:\Users\seher\AppData\Local\Xamarin\Mono for Android\debug.keystore" 
2>C:\Program Files\Java\jdk1.8.0_131\\bin\jarsigner.exe -keystore "C:\Users\seher\AppData\Local\Xamarin\Mono for Android\debug.keystore" -storepass android -keypass android -digestalg SHA1 -sigalg md5withRSA -signedjar bin\Debug\\Dokuza.Dokuza-Signed-Unaligned.apk "C:\Users\seher\OneDrive\Belgeler\visual studio 2017\Projects\Dokuza\Dokuza\obj\Debug\android\bin\Dokuza.Dokuza.apk" androiddebugkey 
2>No -tsa or -tsacert is provided and this jar is not timestamped. Without a timestamp, users may not be able to validate this jar after the signer certificate's expiration date (2047-09-14) or after any future revocation date.
2>C:\Program Files (x86)\Android\android-sdk\build-tools\23.0.3\zipalign.exe 4 "C:\Users\seher\OneDrive\Belgeler\visual studio 2017\Projects\Dokuza\Dokuza\bin\Debug\Dokuza.Dokuza-Signed-Unaligned.apk" "bin\Debug\\Dokuza.Dokuza-Signed.apk" 
2>device 'emulator-5554' not found
2>"Dokuza.csproj" projesini oluşturma tamamlandı.
2>Oluşturma başarılı oldu.
========== Oluşturma: 1 başarılı, 0 başarısız, 0 güncel, 0 atlandı ==========
========== Dağıtım: 0 başarılı, 1 başarısız, 0 atlandı ==========
$header3 = @("Field_1","Field_2","Field_3","Field_4","Field_5")     

Import-Csv $fileName -Header $header3 -Delimiter "`t" | select -skip 3 | Foreach-Object {

    $record = $indexName 
    foreach ($property in $_.PSObject.Properties){

        #doSomething $property.Name, $property.Value

            if($property.Name -like '*CUSIP*'){

                $record = $record + "," + '"' + $property.Value + '"' 
            }
            else{
                $record = $record + "," + $property.Value 
            }                           
    }               

        $array.add($record) | out-null  
        #write-host $record                         
}
$('.plus').click(function() {
    $('#value').html(function(i, val) { return val*1+1 });
});

$('.minus').click(function() {
    $('#value').html(function(i, val) { return val*1-1 });
});