Question

我需要做的是根据按下的箭头键在文本字符串周围移动div元素。实际上，HTML字符串将如下所示：

mytextpharse<div class="blink"></div>

然后，在.keyUp事件中，我将选择按下哪个按钮的信息（event.which），如果按下键是37或39（其中）是：left，right箭头键）我想根据按下的div.blink按钮将event.which移动到正确的方向。因此，如果我按两次左箭头键，它应该将字符串格式化为以下格式：

mytextphar<div class="blink"></div>se

可以在jQuery中完成吗？如果是这样，我需要了解我应该使用哪些功能。

Answer 1

这应该可以解决问题（使用搜索和子目录）:( jsfiddle）

$( document ).keyup(function(e) {
  if(e.which == 37)
  {
      var str = $("#content").html();
      str = str.substr(0,str.search(/<div/)-1) + '<div class="blink"></div>' + str.substr(str.search(/<div/)-1,1) + str.substr(str.search(/<\/div>/)+6);
      $("#content").html(str)
  }
  if(e.which == 39)
  {
      var str = $("#content").html();
      str = str.substr(0,str.search(/<div/)) + str.substr(str.search(/<\/div>/)+6,1) + '<div class="blink"></div>'  + str.substr(str.search(/<\/div>/)+7);
      $("#content").html(str)
  }    
});

HTML：

<div id='content'>
mytext<div class="blink"></div>pharse
</div>

Answer 2

这是你的答案

CODE

<强> HTML：

<div id="www">mytextpharse<div class="blink"></div></div>

JQUERY

$(document).ready(function(){
    $pos = 3
    $("body").keydown(function(e) {
          if(e.keyCode == 37) { 
              if($pos > 1){ pos($pos-1);$pos--}
              else{pos(3);$pos = 3; }
          }else if(e.keyCode == 39) { 
          if($pos < 3){ pos($pos+1); $pos++
          }else{
              pos(1); $pos= 1
          }
          }
    });

    function pos($step){
        console.log($step)
        switch($step){
            case 1:
                 $('#www').html('<div class="blink"></div>mytextpharse')
            break;
            case 2:
                 $('#www').html('mytext<div class="blink"></div>pharse')
            break;
            case 3:
                 $('#www').html('mytextpharse<div class="blink"></div>')
            break;
        }
    }
})

小提琴http://jsfiddle.net/krunalp1993/zEazF/2/

希望它可以帮助你：）

改变元素的位置

2 个答案: