将简单代码从JS转换为jQuery

Convert simple code from JS to jQuery

本文关键字：转换 jQuery JS 简单 代码      更新时间：2023-09-26

我是JS和jQuery的新手(落后于我所知道的时代(，但我有一个可以工作的JS函数，它非常简单，我想转换为jQuery。我想如果我能在这方面得到帮助，这将有助于我理解jQuery的机制(就像我理解这个JS一样(。

这是根据一对单选按钮是选择Yes还是no来显示或隐藏div。我想做的(加载时(是，如果选择Yes，则将div滑入，如果选择no，则将其滑出。我希望默认为"否"(现在默认为"是"(。我确实为幻灯片运行了jQueryUI。

这是JS代码：

<script type="text/javascript">
function makeChoice()
{
    if (document.form1.mobileyesno[1].checked == true)
        {
            document.getElementById('wanttexts').style.visibility = 'hidden'; 
        }
    else
        {
            document.getElementById('wanttexts').style.visibility = 'visible';          
        }
}
</script>

我知道这可能是初级的，但我需要帮助谢谢

function makeChoice() {
    $('#wanttexts').css(
        'visibility',
        document.form1.mobileyesno[1].checked ? 'hidden' : 'visible'
    );
}

编辑得更好：

function makeChoice() {
    $('#wanttexts')
        [document.form1.mobileyesno[1].checked ? 'slideDown' : 'slideUp']();
}

如果您正在使用jQuery，那么您可以尝试此

function makeChoice()
{
    if (document.form1.mobileyesno[1].checked == true)
        {
            $('#wanttexts').slideDown(); 
        }
    else
        {
            $('#wanttexts').slideUp();          
        }
}

我可以给你一些代码来转换它，但这并没有真正的帮助。；(以下是一些链接，我将从这些链接开始，专门替换该函数中的内容。jQuery文档实际上非常棒(大多数时候(。

  • 选择器，特别是ID选择器。这就是你实际引用一组特定事物的方式。

  • CSS这是用于更改元素CSS的函数。下面是关于如何更改DOM中的内容的更广泛的部分。

  • 对于checked，你应该使用.pr((。事实上，最近有一些关于它和.attr之间差异的剧变，但不要太担心。

  • 要在加载时执行某些操作，您应该查看.ready((。您可以为整个文档传递函数，如下所示：

$(document).ready(function () {
  //stuff to do on load
});
  • 为了在jQuery中显示或隐藏东西，它实际上有一些方便的函数，如.show((和.hide((，但您可以查看更多的效果，如滑动和淡入。非常整洁的东西

关于jQuery，还有一些其他的事情需要了解，比如你可以把东西链接起来，等等。阅读一些这样的介绍性文档是值得的。

$(function() {
    if ($('input[name="mobileyesno"]:checked').val() == 'Yes') {
      $('#wanttexts').show();
    } else {
      $('#wanttexts').hide();
    }
);

外部$(function() { });表示当页面加载完成时，花括号中的代码将运行。$('input[name="mobileyesno"]:checked')是一种选择名称为"mobileyesno"且当前正在检查的所有输入字段的方法，val()提取该输入字段的值。如果希望在页面加载时默认选择特定的输入字段，请将checked="checked"属性添加到该单选按钮的输入标记中。

function makeChoice()
{
    if(document.form1.mobileyesno[1].checked)
        $("#wanttexts").hide();
    else
        $("#wanttexts").show();
}

我在想这样的事情：

jQuery(function($){
    function toggle() {
        $('#wanttexts').toggle( 
            $('[name=mobileyesno]:eq(0):checked').length == 1
        );
    }
});

请参阅http://api.jquery.com/toggle/

如果你想要slid效果，你可以做：

$('#mobileyesno').checked(function() {
    $('#wanttexts').slideToggle();
});

否则：

$('#mobileyesno').checked(function() {
    $('#wanttexts').toggle();
});

$(function() {
    $("#mobileyesno").bind("click", function() {
       $("#wanttexts").css("visibility", ($("#mobileyesno").eq(1).is(":checked") ? "hidden" : "visible"));
    });
});

.hide((和.show((将元素设置为display:none/block，而不是OP代码的作用。

相关文章：