Question

这个代码如何工作，当我按下左键按钮（e.keyCode = 39）时，它会跳到下一页。总而言之，我的程序中有7个（$（'btn-group input'）。length）页面。我尝试过使用preventDefault（）;命令里面的条件，我不知道帽子的评论将放在这里，但我不会在我的程序上工作（它跳转到第8页，并返回到第7页）。谢谢

style="font-size:11pt;"

document.onkeydown = checkKey;

function checkKey(e) {

  e = e || window.event;

  if (e.keyCode == '39') {

    var old_num = $('#btn-group').find('.active-btn').val();
    var new_num = +old_num + 1;

    $('#page' + old_num).toggle('slide', {
      direction: 'left',
      complete: function() {
        $('#btn_page' + old_num).removeClass('active-btn');
        $('#page' + old_num).clearQueue();
        $('#page' + old_num).removeClass('active-page');

        $('#page' + new_num).addClass('active-page');
        $('#btn_page' + new_num).addClass('active-btn');

        if (new_num == $('#btn-group input').length) {
          // i dont know what will put here
        }

        $('#page' + new_num).toggle('slide', {
          direction: 'right'
        });
      }
    });
  }
}

Answer 1

您可以在元素的按键上调用此函数。

[Test]
public void Should_not_convert_from_prinergy_date_time_sample2()
{
    void CheckFunction()
    {
        //Arrange
        string testDate = "20121123120122";

        //Act
        testDate.FromPrinergyDateTime();
    }

    //Assert
    Assert.Throws(typeof(Exception), CheckFunction);
}

Answer 2

你需要＆＃34;短路＆＃34;你的函数在到达.toggle函数之前。这将阻止所有进一步执行该功能。

＆＃13;

$(function() {

  document.onkeydown = checkKey;

  function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '39') {

      var old_num = $('#btn-group').find('.active-btn').val();
      var new_num = +old_num + 1;
      
      // if new number is for a page that doesnt exist
      // short circuit
      if (new_num == $('#btn-group input').length) {
          return false;
      }

      $('#page' + old_num).toggle('slide', {
        direction: 'left',
        complete: function() {
          $('#btn_page' + old_num).removeClass('active-btn');
          $('#page' + old_num).removeClass('active-page');

          $('#page' + new_num).addClass('active-page');
          $('#btn_page' + new_num).addClass('active-btn');

          $('#page' + new_num).toggle('slide', {
            direction: 'right'
          });
        }
      });
    }
  }
});

＆＃13;

.active-btn {
  background-color: red !important;
}

.page {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>


<div class="pull-right" id="btn_all">
  <input class="btn active-btn" type="button" id="prev_btn" style="background-color:#66cdaa" style="width:70px;margin:1em" value="Prev.">
  <div class="btn-group" id="btn-group">
    <input class="btn butt active-btn" type="button" id="btn_page1" style="background-color:#66cdaa" value="1" />
    <input class="btn butt" type="button" id="btn_page2" style="background-color:#66cdaa" value="2" />
    <input class="btn butt" type="button" id="btn_page3" style="background-color:#66cdaa" value="3" />
    <input class="btn butt" type="button" id="btn_page4" style="background-color:#66cdaa" value="4" />
    <input class="btn butt" type="button" id="btn_page5" style="background-color:#66cdaa" value="5" />
    <input class="btn butt" type="button" id="btn_page6" style="background-color:#66cdaa" value="6" />
    <input class="btn butt" type="button" id="btn_page7" style="background-color:#66cdaa" value="7" />
    <input class="btn butt active-btn" type="button" style="background-color:#66cdaa" id="next_btn" value="Next" />
  </div>
</div>
<div id="pages_all">
  <div id="page1" class="page active-page" style="display:block">Page 1</div>
  <div id="page2" class="page">Page 2</div>
  <div id="page3" class="page">Page 3</div>
  <div id="page4" class="page">Page 4</div>
  <div id="page5" class="page">Page 5</div>
  <div id="page6" class="page">Page 6</div>
  <div id="page7" class="page">Page 7</div>
</div>

＆＃13;

Answer 3

你可以试试这个：

$('.btn').click(function(){
  $(this).addClass('active-btn').siblings().removeClass('active-btn');
});
document.onkeydown = checkKey;


function checkKey(e) {

  e = e || window.event;
  var old_num = parseInt($('#btn-group').find('.active-btn').val());
  var new_num = old_num+1;
  if (new_num == $('#btn-group input').length) {
      new_num=1;
  }
  if (e.keyCode == '39') {
    $('#page' + old_num).toggle('slide', {
        direction: 'left',
        complete: function() {
        $('#btn_page' + old_num).removeClass('active-btn');
        $('#page' + old_num).clearQueue();
        $('#page' + old_num).removeClass('active-page');
        $('#page' + new_num).addClass('active-page');
        $('#btn_page' + new_num).addClass('active-btn');
        
        $('#page' + new_num).toggle('slide', {
          direction: 'right'
        });
      }
    });
  }
}

.pager:not(:first-child) { display:none;}

.butt{background-color:#66cdaa}
.active-btn {background-color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<p id="page1" class="pager" style="display:inline-block">1</p>
<p id="page2" class="pager">2</p>
<p id="page3" class="pager">3</p>
<p id="page4" class="pager">4</p>
<p id="page5" class="pager">5</p>
<p id="page6" class="pager">6</p>
<p id="page7" class="pager">7</p>
<div class="pull-right" id="btn_all">
	<input  class="btn active-btn" type="button" id="prev_btn"  style="background-color:#66cdaa" style="width:70px;margin:1em"  value="Prev.">
	<div class="btn-group" id="btn-group">
	<br>
<input  class="btn butt active-btn" type="button" id="btn_page1" value="1">
<input  class="btn butt" type="button" id="btn_page2"  value="2">
<input  class="btn butt" type="button" id="btn_page3"  value="3">
<input  class="btn butt" type="button" id="btn_page4"  value="4">
<input  class="btn butt" type="button" id="btn_page5"  value="5">
<input  class="btn butt" type="button" id="btn_page6" value="6">
<input  class="btn butt" type="button" id="btn_page7"  value="7">
<input  class="btn butt" type="button"   id="next_btn" value="Next">
</div>

Answer 4

我认为您可以使用rm generated/* cp cacerts generated/truststore # Add Server certificate to truststore: keytool -import -file server-ca.pem -alias mysqlServerCACert -keystore generated/truststore # Change password: keytool -storepasswd -keystore generated/truststore # Convert key winpty openssl pkcs12 -export -inkey client-key.pem -in client-cert.pem -name my-key -out generated/client.p12 # Import converted client certificate: keytool -importkeystore -srckeystore generated/client.p12 -srcstoretype pkcs12 -destkeystore generated/keystore语句来测试密钥：

switch

我已经写了我自己想要做的版本（至少我认为你正在尝试做的事情），随意使用它作为灵感。我使用CSS3过渡而不是jQuery的切换。

＆＃13;

document.onkeydown = (e) => {
    switch (e.keyCode) {
        case 37 :
            prevPage(); break;
        case 39 :
            nextPage(); break;
    }
}

＆＃13;

const pagesCount = 7;
let currentPage = 1;

// ---- Generating buttons and pages
const $btnGroup = $("#btn-group");
const $pagesContainer = $("#pages");
for(let i=1; i<=pagesCount; i++){
	$pagesContainer.append(`<div class='page'><h2>PAGE ${i}</h2></div>`);
	$btnGroup.append(`<input type='button' value='${i}'/>`);
}
const $btns = $btnGroup.find("input")
$btns.first().addClass("active");
const $pages = $(".page");
$pages.not(":eq(0)").addClass("toRight");
// ---- End generating buttons

$btns.click( function() {
	currentPage = +$(this).val();
	changePage(currentPage);
});

changePage = (pageNum) => {
	$pages.removeClass("toLeft toRight");
	$pages.slice(0, pageNum-1).addClass("toLeft");
	$pages.slice(pageNum, pagesCount).addClass("toRight");
	updateButtons();
}

updateButtons = () => {
	$btns.removeClass("active");
	$btns.eq(currentPage-1).addClass("active");
}

nextPage = () => {
	return currentPage===pagesCount ? null : changePage(++currentPage);
	
}

prevPage = () => {
	return currentPage===1 ? null : changePage(--currentPage);
}

document.onkeydown = (e) => {
 	switch (e.keyCode) {
		case 37 :
			prevPage(); break;
		case 39 :
			nextPage(); break;
  	}
}

$("#prev_btn").click(prevPage);
$("#next_btn").click(nextPage);

＆＃13;

#pages {
  position: relative;
  width: 400px;
  height: 200px;
  overflow: hidden;
}
#pages .page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#pages .page:nth-child(even) {
  background: #008000;
}
#pages .page:nth-child(odd) {
  background: #00f;
}
#pages .page.toLeft {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
#pages .page.toRight {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
#pages .page h2 {
  color: #fff;
}
nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 400px;
}
nav input {
  background-color: #66cdaa;
}
nav #btn-group input {
  margin: 0 5px;
}
nav #btn-group input.active {
  background: #00f;
}

＆＃13;

人们还可以想象一个解决方案，其中所有页面都在一条线上，形成一个色带，而分页按钮只会将整个色带转换到正确的位置，以显示正确的页面<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pages"></div> <nav> <input class="btn active-btn" type="button" id="prev_btn" value="Prev."> <div id="btn-group"></div> <input class="btn butt active-btn" type="button" id="next_btn" value="Next"> </nav>

我希望它有所帮助。

如何在按下javascript按键时禁用按键？

4 个答案: