Question

我需要做的是根据它的子节点设置一个单选按钮，一个锚标签，更具体地说是它的HREF属性（HREF应该是HASH）。代码的第一节就是我一直在为我正在努力争取的部分寻找解决方案。

$('article').each(function(){
  var that = $(this);
  that[ that.find('a').attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'vis' );
});

糟糕的代码：

$('input').(function(){
  var that = $(this);
  that[ that.find('a').attr( 'href' ) === hash ? 'checked'; ]( 'checked' );
});

代码假设要做的是，在有人点击链接（链接是哈希）之后，脚本将检测哈希更改，并根据哈希检查单选按钮，这样做，我有CSS3我制作和测试过的代码，将内容从视图中滑出，将不同的内容放入视图中。

Answer 1

要根据属性查找元素的直接后代，可以使用单个选择器。

$("input > a[href='yourhrefhasthag']").dowhateveryouwant();

*编辑

根据您的更新，如果您想根据链接点击检查输入，那么您可以在用户点击链接并在那里完成所有逻辑时运行一个功能。 e.g

//在脚本的某处，您可以定义函数

window.handle_link_click = function（hash）{ if（hash ==＆＃34; } //您可以使用数据哈希（或任何其他自定义属性）将输入链接到链接。

这是一个demo fiddle

和代码

link 1 radio:<input type="radio" data-hash="link1" value="1"><br/>
link 2 radio:<input type="radio" data-hash="link2" value="2"><br/>
link 3 radio:<input type="radio" data-hash="link3" value="3"><br/>


<a href="javascript: handle_link_click('link1')">link 1</a><br/>
<a href="javascript: handle_link_click('link2')">link 2</a><br/>
<a href="javascript: handle_link_click('link3')">link 3</a><br/>

window.handle_link_click = function( hash, evt) {
    //uncheck all radios and only check the matching radio
    $("input[type='radio']").prop("checked", false);
    $("input[data-hash='"+hash+"']").prop("checked", true);
    //and set url to your hash
    window.location.hash = "#"+hash;
}
//you can use data-hash ( or any other custom property) to link inputs with links.

Answer 2

以下是解决方案：Find an element in DOM based on an attribute value

<强> FindByAttributeValue（的 “href”， “something_value_you_need”）;

但首先，定义此功能：

<script type="text/javascript">
function FindByAttributeValue(attribute, value)    {
  var All = document.getElementsByTagName('*');
  for (var i = 0; i < All.length; i++)       {
    if (All[i].getAttribute(attribute) == value) { return All[i]; }
  }
}
</script>

Answer 3

input元素不能有子元素。如果您写下以下内容：

<input type="radio">
  <a href="#tab1">Test 1 2 3</a>
</input>

浏览器将尝试更正HTML并推断出input和a是兄弟姐妹而不是父/子的有效结构。您可以通过在开发人员工具中导航最终DOM来检查（可能是F12）。

因此，解决方案可以从锚点开始，然后使用prev或prevAll('input')来获取要更改的输入。您可以在此处查看示例https://jsfiddle.net/vrp2zo8f/。

Answer 4

找到我自己的解决方案：

$(function(){

  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    var hash = location.hash;

    if (hash == ""){
      hash = "#Home";
    };

    // Set the page title based on the hash.
    document.title = '-- | ' + ( hash.replace( /^#/, '' ) || 'Home' ) + '';

    // Iterate over all nav links, setting the "active" class as-appropriate.
    $('#navbar li').each(function(){
      var that = $(this);
      that[ that.find('a').attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'active' );
    });
    // Iterate over all articles, setting the "vis" class as-appropriate.
    $('article').each(function(){
      var that = $(this);
      that[ that.find('a').attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'vis' );
    });

    var hashID = hash
    hashID = hashID.replace(/[#]/g, "Slider");
    var theSlider = document.getElementById(hashID)
    theSlider.checked = true
  })

  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange();

});

我改变了单选按钮的id以匹配代码（“Slider”+ HASH）

根据子锚点href查找和检查单选按钮

4 个答案: