Question

我有许多链接，分配了各种数据属性，并且在点击链接时尝试获取data-short-description属性的内容。然后将data-short-description的内容设置为.description div。每次单击不同的链接时，将重复此过程，替换.description内的内容。

我能够破解JS，但不能流利地从头开始写，所以如果有人可以帮助我使用（我假设）.data()，.onclick()等混合物，这将是很好的。< / p>

我的代码的简化版本：

HTML

<div id="container">
  <div class="thumbnails">
    <figure class="thumbnail">
      <a href="#" data-short-description="DESCRIPTION 1 HERE!">
        <img src="#">
      </a>
    </figure>
    <figure class="thumbnail">
      <a href="#" data-short-description="DESCRIPTION 2 HERE!">
        <img src="#">
      </a>
    </figure>
    <figure class="thumbnail">
      <a href="#" data-short-description="DESCRIPTION 3 HERE!">
        <img src="#">
      </a>
    </figure>
  </div>
</div>

<div class="description">
    data-short-description to go here upon clicking link.
</div>

Answer 1

由于您使用jQuery标记了您的问题，我想我可以使用它。

<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function() {
        $('.thumbnail a').click(function() {
            $('.description').html($(this).attr('data-short-description'));
        });
    });
</script>

但是，作为alou mentioned，您可以为链接提供一个类，并为目标div提供一个自己的id。我使用class="description-link"和id="description"，所以整个事情看起来像这样：

<div id="container">
    <div class="thumbnails">
        <figure class="thumbnail">
            <a class="description-link" id="default-description" href="#" data-short-description="DESCRIPTION 1 HERE!">
                <img src="#">
            </a>
        </figure>
        <figure class="thumbnail">
            <a class="description-link" href="#" data-short-description="DESCRIPTION 2 HERE!">
                <img src="#">
            </a>
        </figure>
        <figure class="thumbnail">
            <a class="description-link" href="#" data-short-description="DESCRIPTION 3 HERE!">
                <img src="#">
            </a>
        </figure>
    </div>
</div>

<div id="description">
    data-short-description to go here upon clicking link.
</div>

<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function() {
        // fill in default description on page load
        $('.description').html($('#default-description').attr('data-short-description'));

        // change description when a link is clicked
        $('.description-link').click(function() {
            $('#description').html($(this).attr('data-short-description'));
        });
    });
</script>

Answer 2

这应该这样做

$('.thumbnail a').on('click', function(evt){
  evt.preventDefault(); //dont do default anchor stuff
  var description = $(this).data('short-description'); //get the text
  $('.description').html(description);
});

然而，最好为特定的链接集使用泛型类，例如descriptionlink或其他东西，并使用它来触发事件$('.descriptionlink').on('click'...和目标的id（可能与类相同， #description）

除此之外应该没问题。

Answer 3

非常感谢@hexaholic提供以下答案。辉煌！

<强> HTML

<div class="container">
    <div class="thumbnails">
        <figure class="thumbnail">
            <a class="description-link" href="#" data-short-description="DESCRIPTION 1 HERE!">
                <img src="#">
            </a>
        </figure>
        <figure class="thumbnail">
            <a class="description-link" href="#" data-short-description="DESCRIPTION 2 HERE!">
                <img src="#">
            </a>
        </figure>
        <figure class="thumbnail">
            <a class="description-link" href="#" data-short-description="DESCRIPTION 3 HERE!">
                <img src="#">
            </a>
        </figure>
    </div>
</div>

<div class="description">
    data-short-description to go here upon clicking link.
</div>

<div class="container">
    <div class="thumbnails">
        <figure class="thumbnail">
            <a class="description-link" href="#" data-short-description="DESCRIPTION 1 HERE!">
                <img src="#">
            </a>
        </figure>
        <figure class="thumbnail">
            <a class="description-link" href="#" data-short-description="DESCRIPTION 2 HERE!">
                <img src="#">
            </a>
        </figure>
        <figure class="thumbnail">
            <a class="description-link" href="#" data-short-description="DESCRIPTION 3 HERE!">
                <img src="#">
            </a>
        </figure>
    </div>
</div>

<div class="description">
    data-short-description to go here upon clicking link.
</div>

<强> JS

<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function() {

        // updates a description box with the value of the given link
        function updateDescription(link) {

            // find the parent container
            var parentContainer = link.closest('.container');

            // the description box comes right after the container
            var targetDiv = parentContainer.next();

            //finally, update the content
            targetDiv.html(link.attr('data-short-description'));
        };

        // fill in default description for each container
        $('.container').each(function() {
            var firstLink = $(this).find('.description-link').first();
            updateDescription(firstLink);
        });

        // change description when a link is clicked
        $('.description-link').click(function() {
            // call the update function
            updateDescription($(this));
        });
    });
</script>

点击获取数据属性并放置在div

3 个答案: