Question

我是JS和jQuery的新手（在我知道的时代之后），但我有一个非常简单的JS函数，我想转换为jQuery。我想如果我能得到这方面的帮助，它将帮助我理解jQuery的机制（我理解这个JS）。

这样做的目的是根据是否选择了一对单选按钮来显示或隐藏div。如果选择是，我想要做的是（加载时）滑入div，如果选择否则滑出div。我不想默认（现在是默认）。我确实为幻灯片运行了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>

我知道这可能是基本的但我需要帮助。 :-)谢谢！

Answer 1

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

编辑更好：

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

Answer 2

如果您使用的是jQuery，那么您可以试试这个

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

Answer 3

好吧，我可以给你一些代码为你转换它，但这不会有帮助。 ;）这里有一些链接我会开始专门替换该函数中的东西。 jQuery文档实际上非常棒（大部分时间）。

Selectors，具体而言，ID Selector。所以这就是你实际引用一组特定事物的方式。
CSS这是用于更改元素上的CSS的函数。以下是有关如何change things in the DOM。
如需选中，则应使用.prop()。实际上最近有一些关于它与.attr之间差异的动荡，但不要太担心它。
要在加载时执行某些操作，您应该查看.ready()。您可以为整个文档传递函数，如下所示：

$(document).ready(function () {
  //stuff to do on load
});

要在jQuery中显示或隐藏内容，它实际上有一些便利函数，如.show()和.hide()，但您可以查看effects以获取更多内容，例如滑动和淡入淡出。非常整洁的东西。

还有一些关于jQuery的其他事情，比如你可以链接的东西，等等。通过一些介绍性的文档，如this，这是值得的。

Answer 4

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

Answer 5

我在考虑这样的事情：

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

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

Answer 6

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

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

Answer 7

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

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

否则：

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

Answer 8

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

.hide（）和.show（）会将元素设置为display：none / block - 而不是OP的代码。

将简单代码从JS转换为jQuery

8 个答案: