javascript - 单击 div 时如何切换

Question

大家好，我有以下代码片段

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

然后我在使用移动 Jquery 的地方有这段 HTML 代码

<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>

我试图在单击其中一个单选按钮时打开文本区域。我可以在普通浏览器中切换它，但这在移动设备中不起作用。

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

我还想在文本区域中显示单选按钮的详细信息。就像选择“En la propiedad, deseo visitarla”一样，textarea 应该显示其中的内容

编辑 1

在没有经过测试的 Mobile JQuery 的情况下在普通 DIV 上工作。我认为问题可能是移动 JQuery 在浏览器上抛出的类名....我对此很陌生，也许我错了提前致谢

编辑 2

添加事件

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

它工作正常，但问题是我只想在单击第一个选项时切换隐藏和取消隐藏。现在它会切换所有选项，就像它是 open 一样。当您单击任何其他选项时，它会关闭。这是我正在使用的脚本

    <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 中附加一些内容，但我做不到，有人可以帮我解决这个问题吗。

脚本

<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

这是一个 fiddle http://jsfiddle.net/7GY8K/

我的问题是，如果您单击单选按钮的选项，它应该会打开文本区域，但它不会发生。但是如果我在普通页面中添加的相同代码不是超链接它工作正常请看一下

Answer 1

您应该绑定(bind)到移动设备上的 touchstart 或 touchend 事件。试试这个:

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