Question

我希望有文本预览来显示页面的示例布局。因此，当我输入标题时，它的文本将根据RadioButton值显示在标题div中。意思是我有多个输入要做。

所以我编写代码，但不知何故不将预览文本发送到所需的div。我不擅长jquery，也不擅长英语，抱歉。

HTML

DataTrigger

的Javascript

           <DataTemplate>
                <RadioButton GroupName="GroupList" IsHitTestVisible="False"
                     Margin="0 2 0 0" FontSize="12" FontFamily="Segoe UI Regular" 
                     Content="{Binding name}" >
                    <RadioButton.Style>
                        <Style TargetType="{x:Type RadioButton}">
                            <Setter Property="IsChecked" Value="{Binding Path=IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsEnabled}" Value="False">
                                    <Setter Property="IsChecked" Value="False"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </RadioButton.Style>
                </RadioButton>
            </DataTemplate>

这是小提琴：https://jsfiddle.net/ue2aysdq/1/

Answer 1

如果您想要实时预览，请使用keyup事件将其绑定到输入字段：

        $('input[data-target]').keyup(function() {
          var el = '#' + $(this).attr('data-target');//build the id for the preview element
          $(el).text($(this).val());//change the elements text with the value of the input field
        });

演示：https://jsfiddle.net/ue2aysdq/11/

Answer 2

该活动应为keyup

https://jsfiddle.net/tejashsoni111/ue2aysdq/7/

jQuery('input[type="text"]').on('keyup', function(){
    var id = "#"+jQuery(this).data('target');
    jQuery(id).html(jQuery(this).val());
})

Answer 3

我只是将目标应用于功能事件。

var timerHandle = false; // global!
	function livePreview(what,target) {
    $('#'+target).html(what);
		}

			function sendItOff() {
			  what = document.getElementsByClassName("live").value;
			  console.log("Sending " + what);
			}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="h1"></div>
    <div id="h2"></div>
    <hr />
    
    <input type="text" onkeypress="livePreview(this.value,'h1');"placeholder="h1 value" />
    <input type="text" onkeypress="livePreview(this.value,'h2');"  placeholder="h2 value" />

Answer 4

您可以使用JQuery执行此操作： https://jsfiddle.net/ue2aysdq/9/

<div id="h1"></div>
<div id="h2"></div>
<hr />

<input type="text" data-target="h1" placeholder="h1 value" id="h1in"/>
<input type="text" data-target="h2" placeholder="h2 value" id="h2in"/>


$('#h1in').keyup(function () {
    var impt = $(this).val();
    $("#h1").html(impt);
});

$('#h2in').keyup(function () {
    var impt = $(this).val();
    $("#h2").html(impt);
});

在数据属性的基础上更新div

4 个答案: