Question

我设计了一个指示英语单词的程序。该程序应从用户选择开始。粗略地说，我完成了它，但不幸的是我无法调整启动元素。

有关更多说明，

JQUERY

$('#MyList input[type=radio]').on('change', function () {

  // 1- get checked radio button as a startup word to be pronounced 
  var StartFrom = $('input[type=radio]').index(this);

  // 2- this part to get elements array from selected radio button as start to the end
  $('input[type=text]:gt(' + StartFrom + ')', '#MyList').each(function (index) {
  // here to play word pronunciation 
  $("#PlaySnd").attr('src', 'https://ssl.gstatic.com/dictionary/static/sounds/oxford/' + $(this).val() + '--_gb_1.mp3');
  $("PlaySnd").trigger('play');
  }); 

});

HTML

 <div id=MyList> 
   <input id="Radio1" name="group" type="radio"/>
   <asp:TextBox ID="Txt1" runat="server" Text='boy'></asp:TextBox>

   <input id="Radio2" name="group" type="radio"/>
   <asp:TextBox ID="Txt2" runat="server" Text='girl'></asp:TextBox>

   <input id="Radio3" name="group" type="radio"/>
   <asp:TextBox ID="Txt3" runat="server" Text='woman'></asp:TextBox>

   <input id="Radio4" name="group" type="radio"/>
   <asp:TextBox ID="Txt4" runat="server" Text='man'></asp:TextBox>
 </div>

 <audio id="PlaySnd" autoplay="autoplay" controls="controls"/>

问题是：
正如评论中所示。 2，我用过＆＃34;每个＆＃34;从用户选择中收集所需元素直到单词结束。我用了＃34; gr＆＃34;在选择之前取消播放任何先前的单词。但是，所选单词本身被排除在外!!

我需要将所选的一个包含在元素的数组中。我尝试使用＆＃34; eq＆＃34;旁边＆＃34; gr＆＃34;但我不知道如何解决它。如果您可以解决它或有任何其他解决方案，请帮助我。

Answer 1

为了从当前的checked元素开始获取所有文本元素，您可以使用每个第一个参数。此外，我建议将您感兴趣的所有文本转换为数组，并将此类数组保存为列表的数据属性。

需要另一个事件处理程序，以便在前一个语音再现结束时开始新的语音再现。此活动为ended。

$("#PlaySnd").on('ended', function(e) {
    var selData = JSON.parse($('#MyList').data('selectedData'));
    if (selData.length > 0) {
        $("#PlaySnd").attr('src', 'https://ssl.gstatic.com/dictionary/static/sounds/oxford/' + selData.shift() + '--_gb_1.mp3')
                .trigger('play');
        $('#MyList').data('selectedData', JSON.stringify(selData));

    } else {
        $('#MyList').removeData('selectedData')
    }
});
$('#MyList input[type=radio]').on('change', function () {
    if ($('#MyList').data('selectedData') != undefined) {
        //playing...wait...
        return;
    }
    var StartFrom = $('input[type=radio]').index(this);

    var selData = $('input[type=text]').map(function (idx, ele) {
        if (idx >=StartFrom) {
            return ele.value;
        }
    }).get();
    if (selData.length > 0) {
        $("#PlaySnd").attr('src', 'https://ssl.gstatic.com/dictionary/static/sounds/oxford/' + selData.shift() + '--_gb_1.mp3')
                .trigger('play');
        $('#MyList').data('selectedData', JSON.stringify(selData));
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id=MyList>
    <input id="Radio1" name="group" type="radio"/>
    <input type="text" id="txt1" value='boy'/>

    <input id="Radio2" name="group" type="radio"/>
    <input type="text" id="txt2" value='girl'/>

    <input id="Radio3" name="group" type="radio"/>
    <input type="text" id="txt3" value='woman'/>

    <input id="Radio4" name="group" type="radio"/>
    <input type="text" id="txt4" value='man'/>
</div>

<audio id="PlaySnd" autoplay="autoplay" controls="controls"/>

元素如何添加到一组元素中？

1 个答案: