Question

大家好，我有像这样的Mobile JQuery表单

<header>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
<link href="http://wstation.inmomundo.com/static01/cssii/costarica/themes/inmomobile.css" type="text/css" rel="stylesheet">
<link href="http://wstation.inmomundo.com/static01/cssii/costarica/themes/jquery.mobile.icons.min.css" type="text/css" rel="stylesheet">
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet">
</header>

<fieldset data-role="controlgroup" data-mini="true" style= "color:#006699 !important">

<h4>Estoy interesado(a) En la propiedad, </h4>
<input  onclick="opendiv1()" class="" id="radio-choice-1" name="opcmessage" title="" type="radio" value="1" />
<label for="radio-choice-1">favor de enviarme más información</label>

<input  onclick="opendiv2()" class="" id="radio-choice-2" name="opcmessage" title="" type="radio" value="2" />   
<label for="radio-choice-2"> deseo visitarla</label>

<input  onclick="opendiv3()" class="" id="radio-choice-3" name="opcmessage" title="" type="radio" value="3"  />
<label for="radio-choice-3"> envieme fotos</label>

<input  onclick="opendiv4()" class="" id="radio-choice-4" name="opcmessage" title="" type="radio" value="4" />
<label for="radio-choice-4">envieme más fotos</label>

</fieldset >


<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>

<a data-rel="back" href="#pageone" data-icon="delete" data-inline="true" data-role="button"  data-theme="c" title="Close">Cancelar</a>


<div style="float: right; margin-right: -10px;">
<input  class="me" data-theme="c" data-role="button" data-inline="true" type="submit" data-icon="search" id="im_send_message" name="im_send_message" value="Enviar"  />
</div>

 </form>
</div>



</div>

我有以下要做的事情，我无法做到。

1.当有人点击其中一个选项时，textarea应该打开，文本区域的内容应该与输入标签相同。

2.Enviar按钮的data-icon =“搜索”应更改为data-icon =“check”我尝试过以下无效的脚本

脚本

$("#textarea").hide();

function opendiv1(){
$("#textarea").show();
$("#textarea").html( "Estoy interesado(a) en la propiedad, favor de enviarme más información" );
$('.men').attr('data-icon','arrow-u').button().trigger("refresh"); 
}

function opendiv2(){
$("#textarea").show();
$("#textarea").html( "Estoy interesado(a) en la propiedad, deseo visitarla" );
$('.men').attr('data-icon','arrow-u').button().trigger("refresh"); 
}
function opendiv3(){
$("#textarea").shw();
$("#textarea").html( "Estoy interesado(a) en la propiedad, envieme fotos" );
$('.men').attr('data-icon','arrow-u').button().trigger("refresh"); 
}
function opendiv4(){
$("#textarea").show();
 $("#textarea").html( "Estoy interesado(a) en la propiedad, envieme más fotos" );
$('.men').attr('data-icon','arrow-u').button().trigger("refresh"); 
}

我也有一个JSFIddle它好看看

答案

在@Omar给出的答案的帮助下，我能够完成这件事这是一个小提琴

FIDDLE

Answer 1

jQuery Mobile在div中包装所有类型的输入。该div包含所有样式，因此，如果您想对输入进行任何更改，则需要将它们应用于该div。

要收听广播按钮的更改，您需要使用change事件。

$(document).on("pagecreate", function () {
    $("#textarea").hide();
    $("[name=opcmessage]").on("change", function () {
        var text = $(this).closest("div").find("label").text();
        $("#textarea").text(text).show();
        $(".me").closest("div").removeClass("ui-icon-search").addClass("ui-icon-check");
    });
});

<强> Demo

如何使用javascript更改按钮图标并在MJQ中打开一个新文本区域

1 个答案: