Question

我的页面中有以下html。

<div id="bb-bookblock" class="bb-bookblock bb-vertical" style="height: 578.24885475px">
    <div class="bb-item" style="display: none;">
        <a href="#">
            <img src="photorepository/admin/a-123/14/31 copy_200comp.jpg" alt="31 copy_200comp.jpg" style="height:100%">
        </a>
    </div>
    <div class="bb-item" style="display: none;">
        <a href="#"><img src="photorepository/admin/a-123/14/32 copy_200comp.jpg" alt="32 copy_200comp.jpg" style="height:100%"></a>
    </div>
    <div class="bb-item" style="display: none;">
        <a href="#"><img src="photorepository/admin/a-123/14/4 copy_200comp.jpg" alt="4 copy_200comp.jpg" style="height:100%"></a>
    </div>
    <div class="bb-item" style="display: none;">
        <a href="#"><img src="photorepository/admin/a-123/14/5 copy_200comp.jpg" alt="5 copy_200comp.jpg" style="height:100%"></a>
    </div>
</div>

我需要转换具有特定style="display: block;"图像的类bb-item的div的alt。例如，如果alt为'5 copy_200comp.jpg'，则该特定图片的父div将如下所示：

<div class="bb-item" style="display: block;"> <a href="#"><img src="photorepository/admin/a-123/14/5 copy_200comp.jpg" alt="5 copy_200comp.jpg" style="height:100%"></a></div>

我尝试了var src = $('img[alt="example"]')和类似的构造，但它们无法正常工作。

Answer 1

使用.attr("element")。您的编辑问题有这么多img所以请使用.each()进行全部检查

$('img').each(function(){
  if($(this).attr("alt") == "5 copy_200comp.jpg"){
    $(this).closest(".bb-item").css("display","block");
    }
});

Answer 2

您可以使用:has()选择器，如下所示。

$('.bb-item:has(img[alt="5 copy_200comp.jpg"])').show();

选择器.bb-item:has(img[alt="5 copy_200comp.jpg"])将选择具有类bb-item的元素，其中包含具有指定alt属性值的图像。

Demo

Answer 3

如果内部的img有display:block

，则会在.bb-item上添加alt="example"的代码段

＆＃13;

if($("img").attr("alt") == "example"){
 $("img").parents(".bb-item").show();
}

＆＃13;

.bb-item{
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bb-item" > <a href="#"><img src="photorepository/admin/a-123/14/5 copy_200comp.jpg" alt="example" style="height:100%"></a></div>

＆＃13;

Answer 4

让我们做一些功能来解决这个问题。我认为函数名称是自解释的。您可以查看此处运行的示例http://jsbin.com/nicuxoriqu/edit?html,js,output请注意，该图片的alt属性显示正确的容器。

为了找到图像，我们将使用与该值完全匹配的CSS属性选择器[attr=value]，然后我们将找到该.bb-item更靠近该图像的容器。

function findImageInsideBookBlockByAlt(alt) {
  // Find the image inside the .bb-bookblock element with specific alt
  return $('.bb-bookblock img[alt="' + alt + '"]');
}

function findBBItemFromImage($image) {
  // Find the closest element from the parents node that have the class .bb-item
  return $image.closest('.bb-item');
}


var $image = findImageInsideBookBlockByAlt('4 copy_200comp.jpg');
var $BBItem = findBBItemFromImage($image);


// Do whatever you want with the $BBItem now
// From your comment, just do this
$BBItem.show();

Answer 5

工作正常。我只是选择并显示alt属性选择器的src。

＆＃13;

<script    

src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">    

</script>


<div class="bb-item" style="display: block;"> <a href="#"><img src="photorepository/admin/a-123/14/5 copy_200comp.jpg" alt="5 copy_200comp.jpg" style="height:100%"></a></div>

<script>
$(document).ready(function(){
    
       alert($('img[alt="5 copy_200comp.jpg"]').attr("src"));
    
});
</script>

＆＃13;

Answer 6

此代码可以使用。请检查：

<div id="bb-bookblock" class="bb-bookblock bb-vertical" style="height: 578.24885475px">
    <div class="bb-item" style="display: none;">
        <a href="#"><img src="photorepository/admin/a-123/14/31 copy_200comp.jpg" alt="31 copy_200comp.jpg" style="height:100%"></a>
    </div>
    <div class="bb-item" style="display: none;">
        <a href="#"><img src="photorepository/admin/a-123/14/32 copy_200comp.jpg" alt="32 copy_200comp.jpg" style="height:100%"></a>
    </div>
    <div class="bb-item" style="display: none;">
        <a href="#"><img src="photorepository/admin/a-123/14/4 copy_200comp.jpg" alt="4 copy_200comp.jpg" style="height:100%"></a>
    </div>
    <div class="bb-item" style="display: none;">
        <a href="#"><img src="photorepository/admin/a-123/14/5 copy_200comp.jpg" alt="5 copy_200comp.jpg" style="height:100%"></a>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $( ".bb-item a" ).each(function() {
        if($($( this ).html()).attr("alt")=='5 copy_200comp.jpg'){
                $(this).parent('div').show();
            }
    });
});
</script>

Answer 7

您可以按照此逻辑尝试，如果任何图片alt中存在src，并且他的任何parents都有bb-item类，然后告诉它的父母：

var img = $('#bb-bookblock img');

img.each(function (index, image) {

  var imgSrc = $(image).attr('src');
  var imgAlt = $(image).attr('alt');

  if ( imgSrc.indexOf(imgAlt) != -1 ) {
    if ( $(image).parents().hasClass('bb-item') ) {
       $(image).parents().css('display', 'block');
    }
  }
});

https://jsfiddle.net/c37ostsc/8/

＆＃13;

$(document).ready( function () {
    'use strict';

    function setAltToSrc ( settedAlt ) {

        $('#bb-bookblock img').each(function ( index, image ) {
            var $image = $(image);
            var imgSrc = $image.attr('src');
            var imgAlt = $image.attr('alt');

            if ( imgAlt === settedAlt ) {
                $image.attr( 'src', imgSrc + imgAlt );
            }
            
            imgSrc = $image.attr('src'); // To store the new src
          
            if ( imgSrc.indexOf(imgAlt) != -1 ) {
                if ( $image.parents().hasClass('bb-item') ) {
                    $image.parents().css( 'display', 'block' );
                }
            }
            
        });
    }

    setAltToSrc('/9b59b6');
    $('p').text( $('img').eq(2).attr('src') );

});

＆＃13;

p {
  position: absolute;
  top: 150px;
  left: 0;
  z-index: 88888;
  color: #666
}

img {
  width: 100px !important;
  height: 100px !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bb-bookblock" class="bb-bookblock bb-vertical" style="height: 578.24885475px">
  <div class="bb-item" style="display: none;">
    <a href="#">
      <img src="http://placehold.it/350x150" alt="/2ecc71">
    </a>
  </div>
  <div class="bb-item" style="display: none;">
    <a href="#">
      <img src="http://placehold.it/350x150" alt="/9b59b6">
    </a>
  </div>
  <div class="bb-item" style="display: none;">
    <a href="#">
      <img src="http://placehold.it/350x150" alt="/3498db">
    </a>
  </div>
  <div class="bb-item" style="display: none;">
    <a href="#">
      <img src="http://placehold.it/350x150" alt="/ecf0f1">
    </a>
  </div>
</div>
<p>

</p>

＆＃13;

Answer 8

使用代码组织。

<div class="main">
<div id="bb-bookblock" class="bb-bookblock bb-vertical" style="height: 578.24885475px">
    <div class="bb-item" style="display: none;">
        <a href="#">
            <img src="photorepository/admin/a-123/14/31 copy_200comp.jpg" alt="31 copy_200comp.jpg" style="height:100%">
        </a>
    </div>
    <div class="bb-item" style="display: none;">
        <a href="#"><img src="photorepository/admin/a-123/14/32 copy_200comp.jpg" alt="32 copy_200comp.jpg" style="height:100%"></a>
    </div>
    <div class="bb-item" style="display: none;">
        <a href="#"><img src="photorepository/admin/a-123/14/4 copy_200comp.jpg" alt="4 copy_200comp.jpg" style="height:100%"></a>
    </div>
    <div class="bb-item" style="display: none;">
        <a href="#"><img src="photorepository/admin/a-123/14/5 copy_200comp.jpg" alt="5 copy_200comp.jpg" style="height:100%"></a>
    </div>
</div>
</div>
<script type="text/javascript">
     (function($, window, document, undefined)
    {
        var
         constants = {
            wrapper: '.main',
            sub: '.bb-item a img',
            hiddenDiv: '.bb-item'
        },
        properties = {
            wrapper: null,
            sub :null,
            hiddenDiv :null
        },
          methods = {
             init: function ()
            {
                 properties.wrapper = $(constants.wrapper);
                 properties.sub = properties.wrapper.find(constants.sub);
                 properties.hiddenDiv = properties.wrapper.find(constants.hiddenDiv);
                  properties.hiddenDiv.css({
                   display: 'none'
                 });

                        properties.sub
            .each( methods.pickAlt );

            },
             pickAlt: function (event)
            {

                var $this = $(this);
               var needToShow = $this.attr('alt');
                if(needToShow == '5 copy_200comp.jpg'){

                    methods.show($this);
                }
            },
             show: function (event)
            {
                var $this = event;
                $this.parent().parent().css({
                   display: 'block'
                 });
            }


          };

      $(document).ready(methods.init);
    })(jQuery, window, document);

</script>

如何使用jquery

8 个答案: