Question

大家好我有以下代码片段

<script>
$(document).ready(function(){
$(".ui-radio").click(function(){
   $("#textarea").toggle();
   return false;
});
});
</script>

然后我有这个HTML代码，我正在使用移动Jquery

<fieldset data-role="controlgroup">
<input class="info" id="radio-choice-1" name="opcmessage" title="<?php echo $this->translate->translate("opcsend1","nucleo","En la propiedad, favor de enviarme más información")?>" type="radio" value="1" <?php if($opcmessage==1){?> checked="checked" <?php }?> />
<label for="radio-choice-1">&nbsp;En la propiedad, favor de enviarme más información</label>

<input class="info" id="radio-choice-2" name="opcmessage" title="<?php echo $this->translate->translate("opcsend2","nucleo","En la propiedad, deseo visitarla")?>" type="radio" value="2" <?php if($opcmessage==2){?> checked="" <?php }?> />
<label for="radio-choice-2">En la propiedad, deseo visitarla</label>
<?php if(count($images)<=0){?>
<input class="info" id="radio-choice-3" name="opcmessage" title="<?php echo $this->translate->translate("opcsend3","nucleo","En la propiedad, envieme fotos")?>" type="radio" value="3" <?php if($opcmessage==3){?> checked="" <?php }?> />
<label for="radio-choice-3">En la propiedad, envieme fotos</label>

<?php }else{?>

<input class="info" id="radio-choice-4" name="opcmessage" title="<?php echo $this->translate->translate("opcsend4","nucleo","En la propiedad, envieme más fotos")?>" type="radio" value="4" <?php if($opcmessage==4){?> checked="" <?php }?> />
<label for="radio-choice-4">En la propiedad, envieme más fotos</label>
</fieldset >

我有这个文字区域

<div data-role="fieldcontain">
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>

我试图在单击其中一个单选按钮时切换textarea。我可以在普通浏览器中切换它，但这在移动设备中无效。

如果你知道为什么会出现这个问题，请帮帮我吗？

此外，我想在文本区域中显示单选按钮的详细信息。如果选择了“En la propiedad，deseo visitarla”，则textarea应显示其中的内容

编辑1

在没有测试Mobile JQuery的情况下使用普通DIV。我认为问题可能是移动JQuery在浏览器上抛出的类名....我对此很新，也许我错了在此先感谢

编辑2

添加了活动

$('.ui-radio').bind('touchend',function(e){ $("#textarea").toggle();

它运行正常，但问题是我只想在单击第一个选项时切换隐藏和取消隐藏。现在，它可以切换所有选项，即使它是开放的。当您单击任何其他选项时，它将关闭。这是我正在使用的脚本

    <script>
    $(document).ready(function(){
    $("#textarea").hide();
    $('.ui-radio').bind('touchend',function(e){
        $("#textarea").toggle();
       return false;
    });
    });

</script>

编辑3

<script>
$(document).ready(function(){
$("#textarea").hide();
$('.ui-radio').bind('touchstart',function(e){
    $("#textarea").show();
   return false;
});
});
</script>

问题在于div ui-radio的触摸行为。如果我尝试触摸该部分并向下滚动则无法正常工作。在Chrome，Opera和Firefox中测试过。

编辑4

此外，我正在尝试在#textarea中添加一些内容bbut我无法做到这一点，有人可以帮我解决这个问题。

脚本

<script>
$(document).ready(function(){
$("#textarea").hide();

$('.ui-radio').bind('touchstart',function(e){
    $('<p>En la propiedad, favor de enviarme más información</p>').appendTo('#textarea');
    $("#textarea").show();
  return false;
});

});
</script>

编辑5

<script>
$(document).ready(function(){
$("#textarea").hide();

$('.ui-radio').bind('touchstart',function(e){
    $("#textarea").show();
    var a = $( this ).find( "label" ).attr('for');
    if(a == "radio-choice-1"){
     $("#textarea").html( "Estoy interesado(a) en la propiedad, favor de enviarme más información" );}
     if(a == "radio-choice-2"){
     $("#textarea").html( "Estoy interesado(a) en la propiedad, deseo visitarla" );}
     if(a == "radio-choice-3"){
     $("#textarea").html( "Estoy interesado(a) en la propiedad, envieme fotos" );}
     if(a == "radio-choice-4"){
     $("#textarea").html( "Estoy interesado(a) en la propiedad, envieme más fotos" );}
   return false;
});

});
</script>

这是我提出的脚本，它运行良好，但正如我所说，触摸行为是有效的JQuery和Mobile JQuery在页面中的影响。请告诉我一些我应该做的事情

编辑6

这里有一个小提琴http://jsfiddle.net/7GY8K/

我的问题是，如果你单击单选按钮的选项，它应该打开textarea但它没有发生。但是，如果我在正常页面中添加的相同代码不是超链接，那么它可以正常工作，请看看

Answer 1

要使用移动设备触发事件，您可以尝试替换

$(".ui-radio").click(function()

带

$(".ui-radio").on('click touch', function ()

希望它有所帮助。

Answer 2

您应该绑定到touchstart或触摸移动设备上的事件。试试这个：

$('.ui-radio').bind('touchstart',function(e){
    $("#textarea").toggle();
});

Answer 3

$(document).ready(function(){
   $(".slidingDiv").hide();
   $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
  });
});

    <p>Toggle hide show/p>
    <div class="toggleMe">Toggle between hide() and show()</div>

Answer 4

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(".click_me").click(function(){
    $(".hideshow").toggle();
  });
});
</script>
</head>
<body>
<div class="click_me">click me</div>
<br>
<br>
<div class="hideshow">This is a paragraph.</div>
</body>
</html>

如何在单击div时切换

4 个答案: